| 1 | import { CreditCard, Rocket } from "lucide-react"; |
| 2 | import { Form, Link, data, redirect, useNavigation } from "react-router"; |
| 3 | |
| 4 | import { MICROS_PER_DOLLAR, type Feature, type FeatureState } from "@g1t/contracts"; |
| 5 | |
| 6 | import type { Route } from "./+types/billing"; |
| 7 | import { Button, EmptyState, ErrorText, TimeAgo } from "../../components/ui"; |
| 8 | import { billing } from "../../lib/services.server"; |
| 9 | import { |
| 10 | assertSameOrigin, |
| 11 | getViewer, |
| 12 | requireUser, |
| 13 | roleIn, |
| 14 | unwrap, |
| 15 | } from "../../lib/session.server"; |
| 16 | |
| 17 | /** What can be added in one payment, in dollars. */ |
| 18 | const AMOUNTS = [10, 25, 50, 100]; |
| 19 | |
| 20 | export function meta({ params }: Route.MetaArgs) { |
| 21 | return [{ title: `Billing · ${params.owner} · g1t` }]; |
| 22 | } |
| 23 | |
| 24 | export async function loader({ params, context, request }: Route.LoaderArgs) { |
| 25 | const viewer = getViewer(context); |
| 26 | const role = roleIn(viewer, params.owner); |
| 27 | // Members only; to anyone else the page does not exist. |
| 28 | if (!role) throw data(null, { status: 404 }); |
| 29 | const slug = params.owner.toLowerCase(); |
| 30 | |
| 31 | // Back from the payment page: credit it, then drop the id from the address. |
| 32 | const url = new URL(request.url); |
| 33 | const session = url.searchParams.get("session"); |
| 34 | if (session) { |
| 35 | // The same page returns from both a credit payment and a plan. |
| 36 | if (url.searchParams.get("plan")) { |
| 37 | await billing.confirmSubscription(slug, viewer, session); |
| 38 | throw redirect(`/${slug}/-/billing?subscribed=1`); |
| 39 | } |
| 40 | await billing.confirm(slug, viewer, session); |
| 41 | throw redirect(`/${slug}/-/billing?added=1`); |
| 42 | } |
| 43 | const [account, ledger, features] = await Promise.all([ |
| 44 | billing.account(slug, viewer), |
| 45 | billing.ledger(slug, viewer), |
| 46 | billing.features(slug, viewer), |
| 47 | ]); |
| 48 | return { |
| 49 | slug, |
| 50 | role, |
| 51 | account: unwrap(account), |
| 52 | ledger: unwrap(ledger), |
| 53 | features: unwrap(features), |
| 54 | added: url.searchParams.has("added"), |
| 55 | subscribed: url.searchParams.has("subscribed"), |
| 56 | }; |
| 57 | } |
| 58 | |
| 59 | export async function action({ request, params, context }: Route.ActionArgs) { |
| 60 | assertSameOrigin(request); |
| 61 | const user = requireUser(context, request); |
| 62 | const form = await request.formData(); |
| 63 | const page = `${new URL(request.url).origin}/${params.owner.toLowerCase()}/-/billing`; |
| 64 | const intent = form.get("intent"); |
| 65 | if (intent === "subscribe" || intent === "cancel" || intent === "resume") { |
| 66 | const feature = String(form.get("feature")) as Feature; |
| 67 | if (intent !== "subscribe") { |
| 68 | const changed = await billing.cancelSubscription(user, params.owner, feature, intent === "resume"); |
| 69 | return changed.ok ? null : { error: changed.error.message }; |
| 70 | } |
| 71 | const started = await billing.subscribe(user, params.owner, feature, `${page}?plan=${feature}`); |
| 72 | if (!started.ok) return { error: started.error.message }; |
| 73 | throw redirect(started.value.url); |
| 74 | } |
| 75 | const dollars = Math.trunc(Number(form.get("amount"))); |
| 76 | const started = await billing.checkout( |
| 77 | user, |
| 78 | params.owner, |
| 79 | Number.isFinite(dollars) ? dollars * 100 : 0, |
| 80 | // Spelled out: a form post arrives at a data address, not the page's. |
| 81 | `${new URL(request.url).origin}/${params.owner.toLowerCase()}/-/billing`, |
| 82 | ); |
| 83 | if (!started.ok) return { error: started.error.message }; |
| 84 | throw redirect(started.value.url); |
| 85 | } |
| 86 | |
| 87 | /** Millionths of a dollar as dollars, to the cent or finer. */ |
| 88 | function dollars(micros: number, digits = 2): string { |
| 89 | const sign = micros < 0 ? "−" : ""; |
| 90 | return `${sign}$${(Math.abs(micros) / MICROS_PER_DOLLAR).toFixed(digits)}`; |
| 91 | } |
| 92 | |
| 93 | export default function WorkspaceBilling({ loaderData, actionData }: Route.ComponentProps) { |
| 94 | const { slug, role, account, ledger, features, added, subscribed } = loaderData; |
| 95 | const { status } = account; |
| 96 | const paying = useNavigation().state === "submitting"; |
| 97 | const empty = account.balanceMicros <= 0; |
| 98 | return ( |
| 99 | <div className="grid gap-10 lg:grid-cols-[1fr_20rem]"> |
| 100 | <div className="min-w-0"> |
| 101 | {status.free && ( |
| 102 | <div className="mb-8 rounded-xl border border-accent/30 bg-accent/5 p-5"> |
| 103 | <h2 className="font-medium">Free while g1t is being built out</h2> |
| 104 | <p className="mt-1.5 max-w-2xl text-sm text-muted"> |
| 105 | While we build g1t out, using it costs nothing: agents, reviews, checks and workflows. Bring your own |
| 106 | model provider under Integrations and its usage is billed by that provider, not by g1t. Runs are still |
| 107 | recorded with what they cost, so Usage shows what you are using. This is for now, not forever: pricing |
| 108 | will come later, and we will say so well before anything is charged. |
| 109 | </p> |
| 110 | </div> |
| 111 | )} |
| 112 | <h2 className="font-medium">Plans</h2> |
| 113 | <p className="mt-1 max-w-2xl text-sm text-muted"> |
| 114 | Paid features are turned on per workspace with a monthly plan. They are never free, including while the rest of |
| 115 | g1t is. |
| 116 | </p> |
| 117 | {subscribed && <p className="mt-3 text-sm text-accent">Payment received. The plan is on.</p>} |
| 118 | <div className="mt-5 space-y-4"> |
| 119 | {features.map((state) => ( |
| 120 | <PlanCard |
| 121 | key={state.plan.feature} |
| 122 | state={state} |
| 123 | owner={role === "owner"} |
| 124 | enabled={account.status.enabled} |
| 125 | live={account.status.live} |
| 126 | busy={paying} |
| 127 | /> |
| 128 | ))} |
| 129 | </div> |
| 130 | <div className="mt-2"> |
| 131 | <ErrorText>{actionData?.error}</ErrorText> |
| 132 | </div> |
| 133 | |
| 134 | <h2 className="mt-12 font-medium">Agent credit</h2> |
| 135 | <p className="mt-1 max-w-2xl text-sm text-muted"> |
| 136 | g1t agents that work on this workspace's repositories are paid for from |
| 137 | its credit: what the model cost, plus {account.marginPercent}%. Checks run |
| 138 | free. With no credit, agents do not start. |
| 139 | </p> |
| 140 | |
| 141 | <div |
| 142 | className={`mt-5 rounded-xl border p-5 ${ |
| 143 | empty && status.enabled ? "border-warn/40 bg-warn/5" : "border-line bg-surface" |
| 144 | }`} |
| 145 | > |
| 146 | <p className="text-xs text-muted">Balance</p> |
| 147 | <p className="mt-1 text-3xl font-semibold tabular-nums tracking-tight"> |
| 148 | {dollars(account.balanceMicros)} |
| 149 | </p> |
| 150 | {added && ( |
| 151 | <p className="mt-2 text-sm text-accent">Payment received. Credit added.</p> |
| 152 | )} |
| 153 | {status.free && !features.some((state) => state.on && state.subscription) ? ( |
| 154 | <p className="mt-3 text-sm text-muted"> |
| 155 | Nothing to add for now: runs are free while g1t is being built out. Credit already here stays for when |
| 156 | pricing starts. |
| 157 | </p> |
| 158 | ) : !status.enabled ? ( |
| 159 | <p className="mt-3 text-sm text-muted"> |
| 160 | Payments are not set up on this g1t yet, so nothing is charged and |
| 161 | agents are limited to selected accounts. |
| 162 | </p> |
| 163 | ) : role === "owner" ? ( |
| 164 | <Form method="post" className="mt-4"> |
| 165 | <p className="text-sm text-muted"> |
| 166 | {status.free |
| 167 | ? "Agents are free for now; credit pays for plan usage past its allowance. Add credit by card:" |
| 168 | : "Add credit by card:"} |
| 169 | </p> |
| 170 | <div className="mt-2 flex flex-wrap gap-2"> |
| 171 | {AMOUNTS.map((amount) => ( |
| 172 | <Button |
| 173 | key={amount} |
| 174 | variant={amount === 25 ? "accent" : "quiet"} |
| 175 | type="submit" |
| 176 | name="amount" |
| 177 | value={amount} |
| 178 | disabled={paying} |
| 179 | > |
| 180 | <CreditCard size={14} />${amount} |
| 181 | </Button> |
| 182 | ))} |
| 183 | </div> |
| 184 | {!status.live && ( |
| 185 | <p className="mt-3 text-xs text-faint"> |
| 186 | Payments are in test mode. No real card is charged; use Stripe's |
| 187 | test card 4242 4242 4242 4242 with any future date and any code. |
| 188 | </p> |
| 189 | )} |
| 190 | </Form> |
| 191 | ) : ( |
| 192 | <p className="mt-3 text-sm text-muted">An owner can add credit.</p> |
| 193 | )} |
| 194 | </div> |
| 195 | |
| 196 | <h3 className="mt-10 text-sm font-medium text-muted">Statement</h3> |
| 197 | <div className="mt-3"> |
| 198 | {ledger.length === 0 ? ( |
| 199 | <EmptyState title="Nothing yet"> |
| 200 | Each agent run and each payment appears here. |
| 201 | </EmptyState> |
| 202 | ) : ( |
| 203 | <ul className="divide-y divide-line overflow-hidden rounded-xl border border-line"> |
| 204 | {ledger.map((entry) => ( |
| 205 | <li key={entry.id} className="flex items-center gap-4 px-4 py-3 text-sm"> |
| 206 | <div className="min-w-0 grow"> |
| 207 | {entry.repo && entry.number ? ( |
| 208 | <Link |
| 209 | to={`/${entry.repo}/pull/${entry.number}`} |
| 210 | className="block truncate font-medium hover:underline" |
| 211 | > |
| 212 | {entry.description} |
| 213 | </Link> |
| 214 | ) : ( |
| 215 | <p className="truncate font-medium">{entry.description}</p> |
| 216 | )} |
| 217 | <p className="mt-0.5 text-xs text-faint"> |
| 218 | <TimeAgo at={entry.createdAt} /> |
| 219 | {entry.model && ` · ${entry.model}`} |
| 220 | {entry.createdBy && ` · ${entry.createdBy}`} |
| 221 | </p> |
| 222 | </div> |
| 223 | <span |
| 224 | className={`shrink-0 font-mono text-sm tabular-nums ${ |
| 225 | entry.amountMicros > 0 ? "text-accent" : "text-muted" |
| 226 | }`} |
| 227 | > |
| 228 | {entry.amountMicros > 0 && "+"} |
| 229 | {dollars(entry.amountMicros, entry.kind === "usage" ? 4 : 2)} |
| 230 | </span> |
| 231 | </li> |
| 232 | ))} |
| 233 | </ul> |
| 234 | )} |
| 235 | </div> |
| 236 | </div> |
| 237 | |
| 238 | <aside className="space-y-5 text-sm"> |
| 239 | <section className="rounded-xl border border-line bg-surface p-5"> |
| 240 | <h3 className="font-medium">How it is charged</h3> |
| 241 | <ul className="mt-2 list-disc space-y-1.5 pl-4 text-muted"> |
| 242 | <li> |
| 243 | Each run is charged when it finishes, to the workspace that owns the |
| 244 | repository, whoever assigned the issue. |
| 245 | </li> |
| 246 | <li> |
| 247 | A change, a review, a revision and a catch-up are each a run. The |
| 248 | statement links each to its pull request. |
| 249 | </li> |
| 250 | <li> |
| 251 | Every pull request's session ends with what that run cost before |
| 252 | the margin. |
| 253 | </li> |
| 254 | <li> |
| 255 | With your own model provider, connected under{" "} |
| 256 | <Link to={`/${slug}/-/integrations`} className="text-fg hover:underline"> |
| 257 | Integrations |
| 258 | </Link> |
| 259 | , the provider bills you for the model and each run here is a flat{" "} |
| 260 | {dollars(account.orchestrationFeeMicros)} |
| 261 | {status.free && " once pricing starts; nothing while g1t is being built out"}. |
| 262 | </li> |
| 263 | <li> |
| 264 | Only members of <span className="font-mono text-fg">{slug}</span> can |
| 265 | put agents to work on its repositories. |
| 266 | </li> |
| 267 | </ul> |
| 268 | </section> |
| 269 | </aside> |
| 270 | </div> |
| 271 | ); |
| 272 | } |
| 273 | |
| 274 | /** A paid feature: what it costs and includes, and its plan. */ |
| 275 | function PlanCard({ |
| 276 | state, |
| 277 | owner, |
| 278 | enabled, |
| 279 | live, |
| 280 | busy, |
| 281 | }: { |
| 282 | state: FeatureState; |
| 283 | owner: boolean; |
| 284 | enabled: boolean; |
| 285 | live: boolean; |
| 286 | busy: boolean; |
| 287 | }) { |
| 288 | const { plan, subscription } = state; |
| 289 | const ending = subscription?.status === "canceling"; |
| 290 | const owed = subscription?.status === "past_due"; |
| 291 | return ( |
| 292 | <section |
| 293 | className={`rounded-xl border p-5 ${ |
| 294 | state.on && subscription |
| 295 | ? "border-accent/40 bg-accent/5" |
| 296 | : owed |
| 297 | ? "border-warn/40 bg-warn/5" |
| 298 | : "border-line bg-surface" |
| 299 | }`} |
| 300 | > |
| 301 | <div className="flex flex-wrap items-start justify-between gap-4"> |
| 302 | <div className="min-w-0"> |
| 303 | <h3 className="flex flex-wrap items-center gap-2 font-medium"> |
| 304 | <Rocket size={15} className="text-accent" /> |
| 305 | {plan.title} |
| 306 | {state.on && subscription && ( |
| 307 | <span className="rounded-full bg-accent/15 px-2 py-0.5 text-xs text-accent"> |
| 308 | {ending ? "Ends " : "On"} |
| 309 | {subscription.periodEnd && ( |
| 310 | <> |
| 311 | {ending ? "" : " · renews "} |
| 312 | {new Date(subscription.periodEnd).toLocaleDateString()} |
| 313 | </> |
| 314 | )} |
| 315 | </span> |
| 316 | )} |
| 317 | {owed && <span className="rounded-full bg-warn/15 px-2 py-0.5 text-xs text-warn">Payment failed</span>} |
| 318 | </h3> |
| 319 | <p className="mt-1 text-sm text-muted"> |
| 320 | Every pull request gets a live preview on g1t.page, and the default branch goes to production on merge. |
| 321 | </p> |
| 322 | </div> |
| 323 | <p className="shrink-0 text-right"> |
| 324 | <span className="text-2xl font-semibold tabular-nums tracking-tight"> |
| 325 | ${(plan.monthlyCents / 100).toFixed(0)} |
| 326 | </span> |
| 327 | <span className="text-sm text-muted"> / month</span> |
| 328 | </p> |
| 329 | </div> |
| 330 | <ul className="mt-4 grid gap-1.5 text-sm text-muted sm:grid-cols-2"> |
| 331 | {plan.includes.map((line) => ( |
| 332 | <li key={line} className="flex gap-2"> |
| 333 | <span className="text-accent">✓</span> |
| 334 | {line} |
| 335 | </li> |
| 336 | ))} |
| 337 | </ul> |
| 338 | <p className="mt-3 text-xs text-faint">{plan.overage}</p> |
| 339 | {!enabled ? ( |
| 340 | <p className="mt-4 text-sm text-muted">Payments are not set up on this g1t, so {plan.title} is already on.</p> |
| 341 | ) : !owner ? ( |
| 342 | !state.on && <p className="mt-4 text-sm text-muted">An owner can turn it on.</p> |
| 343 | ) : ( |
| 344 | <Form method="post" className="mt-4 flex flex-wrap items-center gap-3"> |
| 345 | <input type="hidden" name="feature" value={plan.feature} /> |
| 346 | {!state.on || !subscription ? ( |
| 347 | <Button variant="accent" type="submit" name="intent" value="subscribe" disabled={busy}> |
| 348 | <CreditCard size={14} /> |
| 349 | Turn on {plan.title} |
| 350 | </Button> |
| 351 | ) : ending ? ( |
| 352 | <Button variant="quiet" type="submit" name="intent" value="resume" disabled={busy}> |
| 353 | Keep {plan.title} |
| 354 | </Button> |
| 355 | ) : ( |
| 356 | <Button variant="quiet" type="submit" name="intent" value="cancel" disabled={busy}> |
| 357 | Turn off at the end of the period |
| 358 | </Button> |
| 359 | )} |
| 360 | {!live && !state.on && ( |
| 361 | <span className="text-xs text-faint">Test mode: card 4242 4242 4242 4242, any future date and code.</span> |
| 362 | )} |
| 363 | </Form> |
| 364 | )} |
| 365 | </section> |
| 366 | ); |
| 367 | } |