apps/web/app/components/billing-settings.tsx · flagon-io/g1t

Usage, Billing settings and prepaid AI credit; fixes from the UX audit18h ago

1

/**

2

* Billing settings' newer sections: the plan at a glance with the upcoming

3

* invoice, prepaid AI credit with auto-reload, the budget's alerts, the

4

* payment method (kept on Stripe), add-ons, invoice details and the

5

* invoices. Cards and payment methods are handled on Stripe's own page:

6

* g1t has no card form. Each form posts to the billing route's action with

7

* an `intent`.

8

*/

9

import { ArrowUpRight, Bell, Bot, CreditCard, FileText, Mail, Plus, ReceiptText, Sparkles } from "lucide-react";

10

import type { ReactNode } from "react";

11

import { Form, Link } from "react-router";

12

13

import type { AiCredit, BillingDetails, FeatureState, Limit, UsageReport } from "@g1t/contracts";

14

15

import { type PlanStatus, dollars, wholeDollars } from "../lib/billing";

16

import { money } from "../lib/usage";

17

import { Card } from "./billing";

18

import { ErrorText, SubmitButton } from "./ui";

19

import { Skeleton } from "./ui/skeleton";

20

21

const FIELD =

22

"w-full rounded-md border border-line bg-bg px-2.5 py-1.5 text-sm outline-none transition-colors placeholder:text-faint hover:border-line-strong focus:border-accent-dim";

23

24

function Dollar({ name, defaultValue, label, className }: { name: string; defaultValue?: string; label: string; className?: string }) {

25

return (

26

27

28

<input

29

name={name}

30

inputMode="decimal"

31

aria-label={label}

32

defaultValue={defaultValue}

33

autoComplete="off"

34

data-1p-ignore

35

data-lpignore="true"

36

className="w-20 bg-transparent px-1 py-1.5 text-sm tabular-nums outline-none"

37

/>

38

</span>

39

);

40

}

41

42

function whole(micros: number): string {

43

return String(Math.round(micros / 1_000_000));

44

}

45

46

// --- The plan ---------------------------------------------------------------------------------

47

48

/**

49

* The plan at a glance: its name and standing, the billing period, the

50

* included usage, and the upcoming invoice, from g1t's own ledger.

51

*/

52

export function PlanSummary({

53

slug,

54

state,

55

status,

56

details,

57

report,

58

owner,

59

enabled,

60

staff,

61

error,

62

}: {

63

slug: string;

64

state: FeatureState | null;

65

status: PlanStatus;

66

details: BillingDetails | null;

67

report: UsageReport | null;

68

owner: boolean;

69

enabled: boolean;

70

staff: boolean;

71

error?: string;

72

}) {

73

const plan = state?.plan;

74

const subscription = state?.subscription ?? null;

75

const on = ["paid", "canceling", "comped", "enterprise", "past_due"].includes(status.kind);

76

const now = new Date();

77

const start = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 1));

78

const end = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth() + 1, 0));

79

const period = `${start.toLocaleDateString("en-US", { month: "short", day: "numeric", timeZone: "UTC" })} – ${end.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" })}`;

80

const upcoming = details?.upcoming;

81

return (

82

<Card

83

id="plan"

84

tone={status.kind === "past_due" || status.kind === "canceling" ? "warn" : on ? "accent" : "plain"}

85

icon={<Sparkles size={16} />}

86

title={

87

<>

88

{plan?.title ?? "g1t"}

89

90

{status.label}

91

{status.kind === "canceling" && subscription?.periodEnd ? `, ${new Date(subscription.periodEnd).toLocaleDateString()}` : ""}

92

</span>

93

</>

94

}

95

about={

96

on

97

? `Billing period ${period}. One price for the workspace, never per seat.`

98

: "The forge is free: repositories, issues, pull requests, reviews, search and the audit log. Agents, checks, workflows and deployments need the plan, or the trial."

99

}

100

aside={

101

102

<span className="text-2xl font-semibold tabular-nums tracking-tight">${((plan?.monthlyCents ?? 2000) / 100).toFixed(0)}</span>

103

<span className="text-sm text-muted"> / month</span>

104

<span className="block text-xs text-faint">with {wholeDollars(report?.included?.of ?? 10_000_000)} of usage included</span>

105

</p>

106

}

107

>

108

109

{report?.included ? (

110

111

112

<span className="text-muted">Included usage</span>

113

114

{money(report.included.used)} <span className="text-faint">/ {money(report.included.of)}</span>

115

</span>

116

</p>

117

118

119

</div>

120

<p className="mt-1.5 text-xs text-faint">Used first; starts again on the 1st. Unused usage does not carry over.</p>

121

</div>

122

) : (

123

124

<p className="text-muted">Usage at price this month</p>

125

<p className="mt-1 text-lg font-semibold tabular-nums">{report ? money(report.totals.priceMicros) : "—"}</p>

126

{(report?.discountPercent ?? 0) > 0 && report && (

127

128

Discount ({report.discountPercent}%) −{money(report.totals.discountMicros)} · charged {money(report.totals.chargedMicros)}

129

</p>

130

)}

131

</div>

132

)}

133

134

135

<span className="text-muted">Upcoming invoice</span>

136

<span className="text-lg font-semibold tabular-nums">{upcoming ? money(upcoming.totalMicros) : "—"}</span>

137

</p>

138

<p className="text-xs text-faint">Including add-ons and usage, from g1t's ledger{upcoming ? `; the month closes ${new Date(upcoming.closesAt).toLocaleDateString("en-US", { month: "short", day: "numeric", timeZone: "UTC" })}` : ""}.</p>

139

{upcoming && (

140

141

<summary className="cursor-pointer text-xs text-muted hover:text-fg">View upcoming invoice</summary>

142

143

144

145

<dd className="tabular-nums">{money(upcoming.subscriptionsMicros)}</dd>

146

</div>

147

148

<dt className="text-muted">Usage owed, after included usage, credit and discount</dt>

149

<dd className="tabular-nums">{money(upcoming.usageMicros)}</dd>

150

</div>

151

</dl>

152

</details>

153

)}

154

</div>

155

</div>

156

157

158

<FileText size={14} /> Usage

159

</Link>

160

161

<ReceiptText size={14} /> Invoices

162

</a>

163

{owner && enabled && (

164

165

166

{status.kind === "free" || status.kind === "trial" ? (

167

168

169

Start the g1t plan

170

</SubmitButton>

171

) : status.kind === "canceling" ? (

172

173

Keep the plan

174

</SubmitButton>

175

) : status.kind === "paid" && subscription ? (

176

177

Downgrade to free at the period's end

178

</SubmitButton>

179

) : null}

180

</Form>

181

)}

182

183

<Mail size={14} /> Custom needs? Contact us

184

</a>

185

</div>

186

{staff && enabled && (status.kind === "free" || status.kind === "trial") && (

187

<p className="mt-3 text-xs text-faint">Test mode: card 4242 4242 4242 4242, any future date and code.</p>

188

)}

189

{(status.kind === "free" || status.kind === "trial") && (

190

191

Starting the plan gives $5 of AI credit, once. Your first month starts at a {wholeDollars(100_000_000)} limit on usage past

192

what is included, so a stolen card cannot run up a bill.

193

</p>

194

)}

195

<ErrorText>{error}</ErrorText>

196

</Card>

197

);

198

}

199

200

// --- AI credit ----------------------------------------------------------------------------------

201

202

/** Prepaid AI credit: the balance, buying more, and auto-reload. */

203

export function AiCreditCard({ credit, owner, enabled, staff, error }: { credit: AiCredit; owner: boolean; enabled: boolean; staff: boolean; error?: string }) {

204

const rate = credit.agentRateMicros;

205

const fee = credit.cardFee;

206

const feeText = fee.on ? `Stripe's card fee (${(fee.percentMicros / 10_000).toFixed(1)}% + ${dollars(fee.fixedCents * 10_000)}) is its own line at checkout.` : "No card fee.";

207

return (

208

<Card

209

id="ai-credit"

210

tone={credit.blocked ? "warn" : "plain"}

211

icon={<Bot size={16} />}

212

title="AI credit"

213

about={

214

credit.freeViaDiscount

215

? "Agent and AI Gateway usage is free for this workspace under its discount: shown at its price, then the discount."

216

: credit.postpaid

217

? "This workspace's enterprise is invoiced for Agent and AI Gateway usage after use: no credit needed."

218

: `Prepaid credit for Agent and AI Gateway usage, spent before anything else. Models at the provider's price${credit.modelMarkupPercent ? ` plus ${credit.modelMarkupPercent}%` : ""}, plus the agent rate${rate > 0 ? ` (${dollars(rate)} per million tokens)` : ""}. Credit expires ${credit.expiresDays === 365 ? "1 year" : `${credit.expiresDays} days`} after purchase.`

219

}

220

aside={

221

222

<span className="text-2xl font-semibold tabular-nums tracking-tight">{money(credit.balanceMicros)}</span>

223

224

{credit.givenMicros > 0 ? `${money(credit.purchasedMicros)} bought, ${money(credit.givenMicros)} from g1t` : "left"}

225

</span>

226

</p>

227

}

228

>

229

{credit.blocked && (

230

231

Out of AI credit, with this month's included usage used: new runs on g1t's models wait until you buy credit or turn on

232

auto-reload. Runs on your own model provider keep going.

233

</p>

234

)}

235

{!credit.freeViaDiscount && !credit.postpaid && (

236

<>

237

{credit.canBuy && owner && enabled ? (

238

239

240

241

<legend className="mb-2 text-xs text-muted">Buy AI credit</legend>

242

{credit.presetsCents.map((cents) => (

243

244

245

246

${cents / 100}

247

</span>

248

</label>

249

))}

250

251

252

<span className="inline-block rounded-md border border-line px-3 py-1.5 text-sm peer-checked:border-accent peer-checked:bg-accent/10">Custom</span>

253

</label>

254

255

256

<Plus size={14} /> Buy AI credit

257

</SubmitButton>

258

</fieldset>

259

260

${credit.minCents / 100} to ${(credit.maxCents / 100).toLocaleString("en-US")}, on Stripe's page. {feeText}

261

{staff ? " Test mode: card 4242 4242 4242 4242." : ""}

262

</p>

263

</Form>

264

) : !credit.canBuy ? (

265

<p className="mt-4 text-sm text-muted">AI credit is for workspaces on the g1t plan. Starting the plan comes with $5 of it.</p>

266

) : (

267

<p className="mt-4 text-sm text-muted">An owner buys AI credit.</p>

268

)}

269

{credit.canBuy && <AutoReload credit={credit} owner={owner && enabled} />}

270

</>

271

)}

272

{credit.grants.length > 0 && (

273

274

<summary className="cursor-pointer text-xs text-muted hover:text-fg">Purchases and grants</summary>

275

276

{credit.grants.map((grant) => (

277

278

279

{grant.kind === "purchased" ? "Bought" : grant.source === "upgrade" ? "For starting the plan" : "From g1t"}{" "}

280

<span className="text-faint">· {new Date(grant.createdAt).toLocaleDateString()}{grant.expiresAt ? `, expires ${new Date(grant.expiresAt).toLocaleDateString()}` : ""}</span>

281

</span>

282

283

{money(grant.leftMicros)} <span className="text-faint">of {money(grant.amountMicros)}</span>

284

</span>

285

</li>

286

))}

287

</ul>

288

</details>

289

)}

290

<ErrorText>{error}</ErrorText>

291

</Card>

292

);

293

}

294

295

function AutoReload({ credit, owner }: { credit: AiCredit; owner: boolean }) {

296

const r = credit.reload;

297

return (

298

299

300

<p className="text-sm font-medium">Auto-reload</p>

301

<span className={`rounded-full px-2 py-0.5 text-xs ${r.enabled ? "bg-accent/15 text-accent" : "border border-line text-muted"}`}>{r.enabled ? "On" : "Off"}</span>

302

</div>

303

{r.failedAt && (

304

305

Turned off on {new Date(r.failedAt).toLocaleDateString()}: {r.error ?? "the card was declined"}. Update the card on Stripe, then turn it on again.

306

</p>

307

)}

308

{owner ? (

309

310

311

312

313

Reload from the saved card

314

</label>

315

316

When AI credit falls below <Dollar name="threshold" label="Threshold in dollars" defaultValue={whole(r.thresholdMicros)} />

317

reload it to <Dollar name="target" label="Target in dollars" defaultValue={whole(r.targetMicros)} />

318

</div>

319

320

At most <Dollar name="monthly" label="Monthly maximum in dollars" defaultValue={whole(r.monthlyMaxMicros)} /> a month

321

{(r.reloadedMicros ?? 0) > 0 && <span className="text-faint">· {money(r.reloadedMicros ?? 0)} reloaded this month</span>}

322

</div>

323

324

Save auto-reload

325

</SubmitButton>

326

<p className="text-xs text-faint">A reload that cannot be charged turns auto-reload off and tells the owners by email.</p>

327

</Form>

328

) : (

329

330

{r.enabled ? `Below ${money(r.thresholdMicros)}, back to ${money(r.targetMicros)}, at most ${money(r.monthlyMaxMicros)} a month.` : "Off."}

331

</p>

332

)}

333

</div>

334

);

335

}

336

337

// --- Budget alerts --------------------------------------------------------------------------------

338

339

/** The budget's alerts, whether it pauses usage, and its webhook: beside the spend limit. */

340

export function BudgetAlerts({ limit, owner, error }: { limit: Limit; owner: boolean; error?: string }) {

341

const levels = limit.alertLevels ?? [100, 90, 75, 50];

342

const pause = limit.pauseAtLimit ?? true;

343

const spent = limit.spentMicros ?? 0;

344

const of = limit.spendLimitMicros;

345

return (

346

<Card id="budget" icon={<Bell size={16} />} title="Budget alerts" about="On usage past what the plan includes, measured against the spend limit above. Each alert is emailed to the owners once a month.">

347

{of != null && (

348

349

350

<span className="text-muted">Spent this month</span>

351

352

{money(spent)} <span className="text-faint">of {money(of)}</span>

353

</span>

354

</div>

355

356

<div className={`h-full rounded-full ${spent >= of ? "bg-danger" : spent * 4 >= of * 3 ? "bg-warn" : "bg-accent"}`} style={{ width: `${Math.min(100, (spent / Math.max(1, of)) * 100)}%` }} />

357

{levels.filter((l) => l < 100).map((l) => (

358

359

))}

360

</div>

361

</div>

362

)}

363

{owner ? (

364

365

366

367

<legend className="mb-1.5 text-xs text-muted">Alert at</legend>

368

{[50, 75, 90, 100].map((level) => (

369

370

371

{level}%

372

</label>

373

))}

374

</fieldset>

375

376

377

Pause usage at 100%

378

<span className="text-xs text-faint">Off, the budget only alerts; g1t's own limit still applies.</span>

379

</label>

380

381

<span className="block text-xs text-muted">Webhook, told of each alert (optional)</span>

382

383

</label>

384

385

Save alerts

386

</SubmitButton>

387

</Form>

388

) : (

389

390

Alerts at {levels.map((l) => `${l}%`).join(", ") || "none"}; usage {pause ? "pauses" : "does not pause"} at 100%.

391

</p>

392

)}

393

<ErrorText>{error}</ErrorText>

394

</Card>

395

);

396

}

397

398

// --- Payment method -------------------------------------------------------------------------------

399

400

export function PaymentMethodCard({ details, owner, enabled, staff, error }: { details: BillingDetails | null; owner: boolean; enabled: boolean; staff: boolean; error?: string }) {

401

const method = details?.paymentMethod;

402

return (

403

<Card

404

id="payment"

405

icon={<CreditCard size={16} />}

406

title="Payment method"

407

about="Cards are added, removed and made the default on Stripe's billing page. g1t never sees card numbers."

408

aside={

409

owner && enabled ? (

410

411

412

Manage in Stripe

413

414

</SubmitButton>

415

</Form>

416

) : null

417

}

418

>

419

420

{method ? (

421

422

<span className="rounded border border-line px-1.5 py-0.5 text-xs uppercase tracking-wide text-muted">{method.brand ?? method.kind}</span>

423

{method.last4 && (

424

<span>

425

ending <span className="font-mono">{method.last4}</span>

426

</span>

427

)}

428

{method.expMonth && method.expYear && (

429

430

· expires {String(method.expMonth).padStart(2, "0")}/{method.expYear}

431

</span>

432

)}

433

<span className="text-xs text-faint">default</span>

434

</p>

435

) : (

436

<p className="text-muted">No payment method yet. Starting the plan or buying AI credit saves the card you pay with.</p>

437

)}

438

{details?.unavailable && <p className="mt-2 text-xs text-warn">{details.unavailable}</p>}

439

{staff && <p className="mt-2 text-xs text-faint">Test mode: card 4242 4242 4242 4242, any future date and code.</p>}

440

</div>

441

<ErrorText>{error}</ErrorText>

442

</Card>

443

);

444

}

445

446

// --- Add-ons ------------------------------------------------------------------------------------

447

448

export function AddOns({ plan, security, owner, enabled, error }: { plan: FeatureState | null; security: FeatureState | null; owner: boolean; enabled: boolean; error?: string }) {

449

const planOn = !!plan?.on;

450

const rows: { key: string; name: string; about: string; price: string; on: boolean; label: string; control: ReactNode }[] = [];

451

if (security) {

452

const status = security.subscription?.status;

453

rows.push({

454

key: "security",

455

name: security.plan.title,

456

about: "Custom patterns, validity checks, code scanning and dependency review on private repositories.",

457

price: `$${(security.plan.monthlyCents / 100).toFixed(security.plan.monthlyCents % 100 ? 2 : 0)} / month`,

458

on: security.on,

459

label: security.included ? "Included" : status === "canceling" ? "Ends at the period's end" : security.on ? "On" : "Off",

460

control:

461

!owner || !enabled || security.included ? null : (

462

463

464

{!security.on ? (

465

466

Turn on

467

</SubmitButton>

468

) : status === "canceling" ? (

469

470

Keep it on

471

</SubmitButton>

472

) : (

473

474

Turn off

475

</SubmitButton>

476

)}

477

</Form>

478

),

479

});

480

}

481

rows.push({

482

key: "deployments",

483

name: "Production deployments",

484

about: "Previews per pull request and production on g1t.page, metered at cost plus 20%.",

485

price: "With the plan",

486

on: planOn,

487

label: planOn ? "On" : "Needs the plan",

488

control: null,

489

});

490

return (

491

492

493

494

{rows.map((row) => (

495

496

497

498

<p className="text-xs text-muted">{row.about}</p>

499

</div>

500

<span className="tabular-nums text-muted">{row.price}</span>

501

<span className={`rounded-full px-2 py-0.5 text-xs ${row.on ? "bg-accent/15 text-accent" : "border border-line text-muted"}`}>{row.label}</span>

502

{row.control}

503

</li>

504

))}

505

</ul>

506

{error && (

507

508

<ErrorText>{error}</ErrorText>

509

</div>

510

)}

511

</section>

512

);

513

}

514

515

// --- Invoice details ------------------------------------------------------------------------------

516

517

const TAX_IDS: [string, string][] = [

518

["", "None"],

519

["eu_vat", "EU VAT"],

520

["gb_vat", "UK VAT"],

521

["us_ein", "US EIN"],

522

["ca_bn", "Canadian BN"],

523

["au_abn", "Australian ABN"],

524

["ch_vat", "Swiss VAT"],

525

["no_vat", "Norwegian VAT"],

526

["in_gst", "Indian GST"],

527

["jp_cn", "Japanese corporate number"],

528

["br_cnpj", "Brazilian CNPJ"],

529

["mx_rfc", "Mexican RFC"],

530

["sg_uen", "Singapore UEN"],

531

["nz_gst", "New Zealand GST"],

532

["za_vat", "South African VAT"],

533

];

534

535

const LANGUAGES: [string, string][] = [

536

["", "Automatic"],

537

["en", "English"],

538

["en-GB", "English (UK)"],

539

["de", "German"],

540

["fr", "French"],

541

["es", "Spanish"],

542

["it", "Italian"],

543

["nl", "Dutch"],

544

["pt-BR", "Portuguese (Brazil)"],

545

["ja", "Japanese"],

546

["zh", "Chinese"],

547

];

548

549

export function InvoiceDetailsCard({ details, owner, enabled, error }: { details: BillingDetails | null; owner: boolean; enabled: boolean; error?: string }) {

550

const a = details?.address;

551

const disabled = !owner || !enabled;

552

return (

553

<Card id="details" icon={<ReceiptText size={16} />} title="Invoice details" about="Who invoices are for. Kept on the workspace's Stripe customer and printed on every invoice.">

554

555

556

557

558

<span className="text-xs text-muted">Invoice email</span>

559

560

</label>

561

562

<span className="text-xs text-muted">Company name</span>

563

564

</label>

565

566

<span className="text-xs text-muted">Address</span>

567

568

569

</label>

570

571

572

573

574

575

</div>

576

577

578

579

580

{TAX_IDS.map(([value, label]) => (

581

582

{label}

583

</option>

584

))}

585

</select>

586

587

</span>

588

</label>

589

590

<span className="text-xs text-muted">Purchase order</span>

591

592

</label>

593

594

<span className="text-xs text-muted">Invoice language</span>

595

596

{LANGUAGES.map(([value, label]) => (

597

598

{label}

599

</option>

600

))}

601

</select>

602

</label>

603

{!disabled && (

604

605

606

Save invoice details

607

</SubmitButton>

608

</div>

609

)}

610

</fieldset>

611

</Form>

612

{!owner && <p className="mt-3 text-xs text-faint">An owner changes these.</p>}

613

<ErrorText>{error}</ErrorText>

614

</Card>

615

);

616

}

617

618

// --- Invoices ---------------------------------------------------------------------------------------

619

620

const STATUS: Record<string, string> = { paid: "Paid", open: "Open", void: "Void", uncollectible: "Uncollectible", draft: "Draft" };

621

622

export function InvoicesCard({ details }: { details: BillingDetails | null }) {

623

const invoices = details?.invoices ?? [];

624

return (

625

626

627

<h2 className="font-medium">Invoices</h2>

628

<p className="mt-1 text-sm text-muted">The plan, add-ons, AI credit and each month's usage, as Stripe sent them.</p>

629

</div>

630

{invoices.length === 0 ? (

631

<p className="px-5 py-5 text-sm text-faint">No invoices yet.</p>

632

) : (

633

634

{invoices.map((invoice) => (

635

636

<span className="w-24 shrink-0 text-muted tabular-nums">{new Date(invoice.createdAt).toLocaleDateString("en-US", { timeZone: "UTC" })}</span>

637

<span className="min-w-0 flex-1 truncate">{invoice.description ?? invoice.number ?? invoice.id}</span>

638

639

{STATUS[invoice.status] ?? invoice.status}

640

</span>

641

<span className="w-20 text-right tabular-nums">{money(invoice.totalCents * 10_000)}</span>

642

643

{invoice.hostedUrl && (

644

645

View

646

</a>

647

)}

648

{invoice.pdfUrl && (

649

650

PDF

651

</a>

652

)}

653

</span>

654

</li>

655

))}

656

</ul>

657

)}

658

</section>

659

);

660

}

661

662

/** Stripe's sections while Stripe is asked: the same shapes. */

663

export function StripeSkeleton() {

664

return (

665

666

667

Loading from Stripe…

668

</span>

669

{[5.5, 14, 8].map((rem, i) => (

670

671

672

673

674

</div>

675

))}

676

</div>

677

);

678

}