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") });

217

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

218

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

219

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

220

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

221

}

222

case "budget": {

223

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

224

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

225

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

226

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

227

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

228

}

229

case "details": {

230

const parsed = parseInvoiceDetails(form);

231

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

232

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

233

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

234

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

235

}

236

case "spend-limit": {

237

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

238

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

239

let micros = parsed.value.micros;

240

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

241

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

242

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

243

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

244

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

245

}

246

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

247

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

248

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

249

}

250

case "request": {

251

const parsed = parseLimitRequest({

252

kind: form.get("kind"),

253

amount: form.get("amount"),

254

reason: form.get("reason"),

255

expected: form.get("expected"),

256

});

257

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

258

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

259

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

260

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

261

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

262

}

263

case "caps": {

264

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

265

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

266

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

267

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

268

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

269

}

270

case "spike": {

271

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

272

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

273

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

274

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

275

}

276

case "prepay": {

277

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

278

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

279

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

280

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

281

throw redirect(started.value.url);

282

}

283

default:

284

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

}

}

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

289

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

290

loaderData;

291

const { status } = account;

292

const owner = role === "owner" || loaderData.managesBilling;

293

const error = actionData as SectionError;

294

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

295

const standing = planStatus(plan, entitlements);

296

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

297

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

298

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

299

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

300

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

301

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

302

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

);

return (

{status.free && (

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

312

313

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>}

319

{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 ? (

325

326

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

327

328

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

329

address is saved.{" "}

330

{owner ? (

331

332

Add it under Invoice details

333

</a>

334

) : (

335

"An owner adds it under Invoice details."

)}

</p>

</div>

) : null

}

</Await>

</Suspense>

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

344

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

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

349

</Suspense>

350

351

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

352

353

{free && status.enabled && (

)}

{paying && limit && selfServe && (

<>

</>

)}

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

367

368

{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>

398

399

<li>

400

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

401

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

406

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

407

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

408

</li>

409

<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>

410

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

411

<li>

412

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.

417

</li>

418

<li>

419

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

420

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

421

</li>

422

<li>

423

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

424

is its own line on every receipt and invoice.

425

</li>

426

<li>

427

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

428

billing have none.

429

</li>

430

<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

435

</Link>

436

437

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

438

</Link>

439

440

<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. */

450

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

451

return (

452

453

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

454

455

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

456

and tax are their own lines.

457

</p>

458

459

{invoices.map((invoice) => (

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

464

</span>

465

<span

466

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

467

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

468

}`}

469

>

470

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

471

</span>

472

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

473

{invoice.hostedUrl && (

View

</a>

)}

{invoice.pdfUrl && (

PDF

</a>

)}

</div>

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

486

487

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

488

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

489

</li>

490

))}

491

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

492

493

<span>Card processing fee</span>

494

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

495

</li>

496

)}

497

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

498

499

500

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

</li>

)}

</ul>

</li>

))}

</ul>

</section>

);

}