apps/web/app/routes/workspace/billing.tsx · flagon-io/g1t

const parsed = parseAiReload({ enabled: form.get("enabled"), threshold: form.get("threshold"), target: form.get("target"), monthly: form.get("monthly") });

215

if (!parsed.ok) return fail("ai", parsed.error);

216

const set = await billing.setAiReload(user, slug, parsed.value);

217

if (!set.ok) return fail("ai", set.error.message);

218

throw done("ai_reload", "#ai-credit");

219

}

220

case "budget": {

221

const parsed = parseBudgetAlerts({ alerts: form.getAll("alert"), pause: form.get("pause"), webhook: form.get("webhook") });

222

if (!parsed.ok) return fail("budget", parsed.error);

223

const set = await billing.setBudget(user, slug, { amountMicros: null, keepLimit: true, ...parsed.value });

224

if (!set.ok) return fail("budget", set.error.message);

225

throw done("budget", "#budget");

226

}

227

case "details": {

228

const parsed = parseInvoiceDetails(form);

229

if (!parsed.ok) return fail("details", parsed.error);

230

const saved = await billing.setBillingDetails(user, slug, parsed.value);

231

if (!saved.ok) return fail("details", saved.error.message);

232

throw done("details", "#details");

233

}

234

case "spend-limit": {

235

const parsed = parseSpendLimit({ mode: form.get("mode"), limit: form.get("limit") });

236

if (!parsed.ok) return fail("limit", parsed.error);

237

let micros = parsed.value.micros;

238

if (parsed.value.raiseOnce && micros == null) {

239

// The one-time raise with no amount: as high as it goes.

240

const limit = await billing.limit(slug, user);

241

micros = limit.ok ? (limit.value.raiseOnceMicros ?? null) : null;

242

if (micros == null) return fail("limit", "The one-time raise is not available. Prepay, or use Raise my limit.");

243

}

244

const set = await billing.setSpendLimit(user, slug, micros, parsed.value.useFull, parsed.value.raiseOnce);

245

if (!set.ok) return fail("limit", set.error.message);

246

throw done("limit", "#limit");

247

}

248

case "request": {

249

const parsed = parseLimitRequest({

250

kind: form.get("kind"),

251

amount: form.get("amount"),

252

reason: form.get("reason"),

253

expected: form.get("expected"),

254

});

255

const section = String(form.get("kind")) === "overage" ? "overage" : "raise";

256

if (!parsed.ok) return fail(section, parsed.error);

257

const sent = await billing.requestLimit(user, slug, parsed.value);

258

if (!sent.ok) return fail(section, sent.error.message);

259

throw done(section === "overage" ? "told" : "requested", `#${section}`);

260

}

261

case "caps": {

262

const parsed = parseCaps({ run: form.get("run"), issue: form.get("issue") });

263

if (!parsed.ok) return fail("caps", parsed.error);

264

const set = await billing.setCaps(user, slug, parsed.value);

265

if (!set.ok) return fail("caps", set.error.message);

266

throw done("caps", "#caps");

267

}

268

case "spike": {

269

const keep = String(form.get("decision")) === "keep";

270

const answered = await billing.confirmSpike(user, slug, keep);

271

if (!answered.ok) return fail("spike", answered.error.message);

272

throw done(keep ? "keep" : "stop");

273

}

274

case "prepay": {

275

const parsed = parsePrepay({ amount: form.get("amount"), custom: form.get("custom"), method: form.get("method") });

276

if (!parsed.ok) return fail("prepay", parsed.error);

277

const started = await billing.checkout(user, slug, parsed.value.amountCents, here, parsed.value.method);

278

if (!started.ok) return fail("prepay", started.error.message);

279

throw redirect(started.value.url);

280

}

281

default:

282

return fail("plan", "Unknown action.");

}

}

export default function WorkspaceBilling({ loaderData, actionData }: Route.ComponentProps) {

287

const { slug, role, staff, account, statement, group, plan, securityPlan, limit, invoices, entitlements, requests, credits, ai, report, details, trialMicros, notice, problem } =

288

loaderData;

289

const { status } = account;

290

const owner = role === "owner";

291

const error = actionData as SectionError;

292

const err = (section: string) => (error && error.section === section ? error.error : undefined);

293

const standing = planStatus(plan, entitlements);

294

const paying = standing.kind === "paid" || standing.kind === "canceling" || standing.kind === "past_due";

295

const free = standing.kind === "free" || standing.kind === "trial";

296

const prepaid = limit?.prepaidMicros ?? entitlements?.prepaidMicros ?? 0;

297

// The spend limit and its budget are the owners' to set only where

298

// billing lets them: on the plan, never a free workspace's ceiling.

299

const selfServe = !!limit && (limit.trust === "paid" || limit.trust === "established");

300

const summary = (loaded: Awaited<typeof details>) => (

);

return (

{status.free && (

<h2 className="font-medium">Free while g1t is being built out</h2>

310

311

Runs are recorded with what they cost, so Usage shows what you use, but nothing is charged for now. We will say so well

before anything is.

</p>

</div>

)}

{notice && <p className="mb-6 rounded-lg border border-accent/30 bg-accent/5 px-4 py-2.5 text-sm">{notice}</p>}

317

{problem && <p className="mb-6 rounded-lg border border-danger/40 bg-danger/5 px-4 py-2.5 text-sm">{problem}</p>}

{(loaded) =>

loaded?.taxAddressNeededAt ? (

323

324

<p className="font-medium">Add a billing address</p>

325

326

Stripe needs it to work out tax, so g1t did not charge the card. Nothing is lost: the charge goes through once the

327

address is saved.{" "}

328

{owner ? (

329

330

Add it under Invoice details

331

</a>

332

) : (

333

"An owner adds it under Invoice details."

)}

</p>

</div>

) : null

}

</Await>

</Suspense>

{entitlements && <SpikeBanner slug={slug} entitlements={entitlements} owner={owner} />}

342

{err("spike") && <p className="mb-6 text-sm text-danger">{err("spike")}</p>}

<Await resolve={details}>{(loaded) => summary(loaded)}</Await>

347

</Suspense>

348

349

{ai && status.enabled && <AiCreditCard credit={ai} owner={owner} enabled={status.enabled} staff={staff} error={err("ai")} />}

350

351

{free && status.enabled && (

)}

{paying && limit && selfServe && (

<>

</>

)}

{credits && <CreditsCard credits={credits} />}

365

366

{entitlements && (paying || standing.kind === "trial" || standing.kind === "comped" || standing.kind === "enterprise") && (

)}

{paying && <OverageCard requests={requests} owner={owner} error={err("overage")} />}

{status.enabled && (

{(loaded) => (

<>

</>

)}

</Await>

</Suspense>

)}

{invoices.length > 0 && <InvoiceList invoices={invoices} />}

</div>

<h3 className="font-medium">How it is charged</h3>

396

397

<li>

398

The plan is {wholeDollars((plan?.plan.monthlyCents ?? 2000) * 10_000)} a month for the workspace, with $10 of usage

399

included. Usage is charged at what it costs g1t plus {account.marginPercent}%, from the first second, after what is

included.

</li>

<li>

Agent runs: the model at the provider's price{ai && ai.modelMarkupPercent ? ` plus ${ai.modelMarkupPercent}%` : ", with no markup"}, plus

404

g1t's agent rate per million tokens{ai && ai.agentRateMicros > 0 ? ` (${dollars(ai.agentRateMicros)})` : ""}. AI Gateway: the

405

provider's price, free of markup while in beta.

406

</li>

407

<li>AI usage draws on prepaid AI credit first; at $0, new runs on g1t's models wait for more credit or auto-reload.</li>

408

<li>Credit from g1t comes off what you owe, the soonest-expiring first.</li>

409

<li>

410

With your own model provider, connected under{" "}

Integrations

</Link>

, the provider bills you for the model, and a run here is charged only its sandbox time.

415

</li>

416

<li>

417

Each month closes with an itemised invoice. No card is charged less than{" "}

418

{dollars(entitlements?.minChargeMicros ?? 5 * MICROS_PER_DOLLAR, 0)}; less carries over.

419

</li>

420

<li>

421

Prices exclude tax. Stripe adds tax where it applies, worked out from the billing address under Invoice details, and it

422

is its own line on every receipt and invoice.

423

</li>

424

<li>

425

Card payments carry Stripe's card processing fee as their own line, shown before you pay. Bank transfers and invoiced

426

billing have none.

427

</li>

428

<li>No seats: add as many people and agents as you like, once the workspace is on the plan.</li>

</ul>

<FileText size={14} /> Usage, by product and project

433

</Link>

434

435

<CreditCard size={14} /> Pricing and today's prices

436

</Link>

437

438

<ArrowUpRight size={14} /> How usage and billing work

</a>

</div>

</section>

</aside>

</div>

);

}

/** The workspace's month-end invoices from g1t, each kept on Stripe with its PDF. */

448

function InvoiceList({ invoices }: { invoices: WorkspaceInvoice[] }) {

449

return (

450

451

<h2 className="font-medium">Usage invoices</h2>

452

453

One when each month closes, and one each time g1t charges the card near your limit. Amounts are for usage; the card fee

454

and tax are their own lines.

455

</p>

456

457

{invoices.map((invoice) => (

{invoice.reason === "month" ? `Usage for ${invoice.period}` : `Charged near the limit, ${invoice.period}`}

462

</span>

463

<span

464

className={`rounded-full border px-2 py-0.5 text-xs ${

465

invoice.status === "paid" ? "border-success/40 text-success" : "border-danger/40 text-danger"

466

}`}

467

>

468

{invoice.status === "paid" ? "Paid" : invoice.status === "failed" ? "Payment failed" : invoice.status}

469

</span>

470

<span className="ml-auto font-mono tabular-nums">{dollars(invoice.amountMicros)}</span>

471

{invoice.hostedUrl && (

View

</a>

)}

{invoice.pdfUrl && (

PDF

</a>

)}

</div>

{invoice.lines.map((line) => (

484

485

<span>{line.description}</span>

486

<span className="font-mono tabular-nums">{dollars(line.amountMicros)}</span>

487

</li>

488

))}

489

{(invoice.feeMicros ?? 0) > 0 && (

490

491

<span>Card processing fee</span>

492

<span className="font-mono tabular-nums">{dollars(invoice.feeMicros ?? 0)}</span>

493

</li>

494

)}

495

{(invoice.taxMicros ?? 0) > 0 && (

496

497

498

<span className="font-mono tabular-nums">{dollars(invoice.taxMicros ?? 0)}</span>

</li>

)}

</ul>

</li>

))}

</ul>

</section>

);

}