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

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

25

26

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

return (

<input

name={name}

inputMode="decimal"

aria-label={label}

defaultValue={defaultValue}

autoComplete="off"

data-1p-ignore

data-lpignore="true"

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

/>

</span>

);

}

function whole(micros: number): string {

45

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

46

}

47

48

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

49

50

/**

51

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

52

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

53

*/

54

export function PlanSummary({

slug,

state,

status,

details,

report,

owner,

enabled,

staff,

error,

}: {

slug: string;

state: FeatureState | null;

67

status: PlanStatus;

68

details: BillingDetails | null;

69

report: UsageReport | null;

owner: boolean;

enabled: boolean;

staff: boolean;

error?: string;

}) {

const plan = state?.plan;

76

const subscription = state?.subscription ?? null;

77

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

78

const now = new Date();

79

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

80

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

81

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

82

const upcoming = details?.upcoming;

return (

<Card

id="plan"

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

87

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

88

title={

89

<>

90

{plan?.title ?? "g1t"}

91

92

{status.label}

93

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

</span>

</>

}

about={

on

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

100

: "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."

}

aside={

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

105

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

106

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

107

{status.kind !== "comped" && status.kind !== "enterprise" && (

108

109

{plan?.cardFeeCents ? `+ ${dollars(plan.cardFeeCents * 10_000)} card processing fee, ` : ""}

110

{plan?.cardFeeCents ? PLUS_TAX : "Plus tax where it applies"}

</span>

)}

</p>

}

>

{report?.included ? (

118

119

120

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

121

122

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

</span>

</p>

</div>

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

</div>

) : (

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

133

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

134

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

135

136

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

</p>

)}

</div>

)}

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

144

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

145

</p>

146

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

147

{upcoming && (

148

149

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

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

154

</div>

155

156

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

157

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

</div>

</dl>

</details>

)}

</div>

</div>

<FileText size={14} /> Usage

167

</Link>

168

169

<ReceiptText size={14} /> Invoices

170

</a>

171

{owner && enabled && (

172

173

174

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

Start the g1t plan

</SubmitButton>

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

Keep the plan

</SubmitButton>

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

184

185

Downgrade to free at the period's end

</SubmitButton>

) : null}

</Form>

)}

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

192

</a>

193

</div>

194

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

195

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

196

)}

197

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

198

199

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

200

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

201

</p>

202

)}

203

<ErrorText>{error}</ErrorText>

</Card>

);

}

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

209

210

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

211

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

212

const rate = credit.agentRateMicros;

213

const fee = credit.cardFee;

214

// What is chosen, so the fee shows before Stripe's page does.

215

const [chosenCents, setChosenCents] = useState(2_500);

216

const chosenFee = cardFeeCents(chosenCents, fee);

217

const stripeFee = `Stripe's ${(fee.percentMicros / 10_000).toFixed(1)}% + ${dollars(fee.fixedCents * 10_000)}`;

218

const feeText = !fee.on

219

? `${feeAndTax(0)}.`

220

: chosenCents > 0

221

? `On $${(chosenCents / 100).toLocaleString("en-US")}: ${feeAndTax(chosenFee).replace(/^C/, "c")} (the fee is ${stripeFee}, its own line at checkout).`

222

: `A card processing fee (${stripeFee}) is its own line at checkout, ${PLUS_TAX}.`;

223

const choose = (form: HTMLFormElement) => {

224

const data = new FormData(form);

225

const amount = String(data.get("amount") ?? "");

226

const dollarsChosen = amount === "custom" ? Number(String(data.get("custom") ?? "").replace(/[$,\s]/g, "")) : Number(amount);

227

setChosenCents(Number.isFinite(dollarsChosen) && dollarsChosen > 0 ? Math.round(dollarsChosen * 100) : 0);

};

return (

<Card

id="ai-credit"

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

233

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

234

title="AI credit"

235

about={

236

credit.freeViaDiscount

237

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

238

: credit.postpaid

239

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

240

: `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.`

}

aside={

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

245

246

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

</span>

</p>

}

>

{credit.blocked && (

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

254

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

255

</p>

256

)}

257

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

258

<>

259

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

260

<Form method="post" className="mt-4" onChange={(event) => choose(event.currentTarget)}>

261

262

263

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

264

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

${cents / 100}

</span>

</label>

))}

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

</label>

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

</SubmitButton>

</fieldset>

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

283

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

284

</p>

285

</Form>

286

) : !credit.canBuy ? (

287

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

288

) : (

289

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

290

)}

291

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

292

</>

293

)}

294

{credit.grants.length > 0 && (

295

296

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

297

298

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

299

300

301

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

302

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

303

</span>

304

305

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

</span>

</li>

))}

</ul>

</details>

)}

<ErrorText>{error}</ErrorText>

</Card>

);

}

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

318

const r = credit.reload;

return (

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

323

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

</div>

{r.failedAt && (

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

</p>

)}

{owner ? (

Reload from the saved card

336

</label>

337

338

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

339

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

340

</div>

341

342

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

343

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

</div>

Save auto-reload

</SubmitButton>

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

</Form>

) : (

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

</p>

)}

</div>

);

}

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

360

361

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

362

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

363

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

364

const pause = limit.pauseAtLimit ?? true;

365

const spent = limit.spentMicros ?? 0;

366

const of = limit.spendLimitMicros;

367

return (

368

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

{of != null && (

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

373

374

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

</span>

</div>

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

379

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

))}

</div>

</div>

)}

{owner ? (

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

390

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

{level}%

</label>

))}

</fieldset>

Pause usage at 100%

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

401

</label>

402

403

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

</label>

Save alerts

</SubmitButton>

</Form>

) : (

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

413

</p>

414

)}

415

<ErrorText>{error}</ErrorText>

</Card>

);

}

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

421

422

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

423

const method = details?.paymentMethod;

return (

<Card

id="payment"

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

428

title="Payment method"

429

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

aside={

owner && enabled ? (

Manage in Stripe

</SubmitButton>

</Form>

) : null

}

>

{method ? (

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

445

{method.last4 && (

446

<span>

447

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

448

</span>

449

)}

450

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

451

452

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

453

</span>

454

)}

455

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

456

</p>

457

) : (

458

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

459

)}

460

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

461

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

462

</div>

463

<ErrorText>{error}</ErrorText>

</Card>

);

}

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

469

470

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

471

const planOn = !!plan?.on;

472

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

if (security) {

rows.push({

key: "security",

name: security.plan.title,

477

about: "Custom patterns, validity checks, code scanning and dependency review on private repositories. No price of its own: scans are charged at cost plus 20%.",

478

price: "With the plan",

479

on: security.on,

480

label: security.on ? "On" : "Needs the plan",

control: null,

});

}

rows.push({

key: "deployments",

name: "Production deployments",

487

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

488

price: "With the plan",

489

on: planOn,

490

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

control: null,

});

return (

{rows.map((row) => (

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

502

</div>

503

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

504

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

{row.control}

</li>

))}

</ul>

{error && (

<ErrorText>{error}</ErrorText>

</div>

)}

</section>

);

}

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

519

520

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

521

["", "None"],

522

["eu_vat", "EU VAT"],

523

["gb_vat", "UK VAT"],

524

["us_ein", "US EIN"],

525

["ca_bn", "Canadian BN"],

526

["au_abn", "Australian ABN"],

527

["ch_vat", "Swiss VAT"],

528

["no_vat", "Norwegian VAT"],

529

["in_gst", "Indian GST"],

530

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

531

["br_cnpj", "Brazilian CNPJ"],

532

["mx_rfc", "Mexican RFC"],

533

["sg_uen", "Singapore UEN"],

534

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

535

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

536

];

537

538

/** What Stripe's check of a tax ID found. */

539

const TAX_ID_STATUS: Record<string, string> = {

540

verified: "Verified by Stripe.",

541

pending: "Stripe is checking it.",

542

unverified: "Stripe could not verify it. Check the number.",

543

unavailable: "Stripe cannot check this kind of ID.",

544

};

545

546

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

547

["", "Automatic"],

548

["en", "English"],

549

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

["de", "German"],

["fr", "French"],

["es", "Spanish"],

["it", "Italian"],

["nl", "Dutch"],

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

["ja", "Japanese"],

["zh", "Chinese"],

];

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

561

const a = details?.address;

562

const disabled = !owner || !enabled;

return (

<Card

id="details"

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

567

title="Invoice details"

568

about="Who invoices are for. Kept on the workspace's Stripe customer and printed on every invoice. Tax is worked out from the address."

569

>

570

{details?.customer && !details.taxLocation && (

571

572

{details.taxAddressNeededAt

573

? "Add the billing address: Stripe needs at least the country (and in the US the ZIP code) to work out tax, so g1t is not charging the card until it is here."

574

: "No billing address yet. Stripe needs at least the country (and in the US the ZIP code) to work out tax before g1t charges the card."}

575

</p>

576

)}

577

{(details?.taxExempt === "exempt" || details?.taxExempt === "reverse") && (

578

579

{details.taxExempt === "exempt" ? "Tax exempt: no tax is added." : "Reverse charge: you account for the tax yourself, and invoices say so."}

</p>

)}

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

</label>

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

</label>

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

</label>

</div>

<SelectField

name="taxIdType"

defaultValue={details?.taxIdType ?? ""}

610

aria-label="Kind of tax ID"

611

className="h-auto w-auto shrink-0 px-2.5 py-1.5"

612

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

/>

</span>

{details?.taxId && details.taxIdStatus && (

617

<span className="mt-1 block text-xs text-faint">{TAX_ID_STATUS[details.taxIdStatus] ?? `Stripe's check: ${details.taxIdStatus}`}</span>

)}

</label>

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

</label>

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

626

<SelectField

627

name="language"

628

defaultValue={details?.language ?? ""}

629

aria-label="Invoice language"

630

className="mt-1 h-auto px-2.5 py-1.5"

631

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

/>

</label>

{!disabled && (

Save invoice details

</SubmitButton>

</div>

)}

</fieldset>

</Form>

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

644

<ErrorText>{error}</ErrorText>

</Card>

);

}

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

650

651

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

652

653

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

654

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

return (

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

659

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

660

</div>

661

{invoices.length === 0 ? (

662

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

663

) : (

664

665

{invoices.map((invoice) => (

666

667

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

668

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

669

670

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

671

</span>

672

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

673

674

{invoice.hostedUrl && (

View

</a>

)}

{invoice.pdfUrl && (

PDF

</a>

)}

</span>

</li>

))}

</ul>

)}

</section>

);

}

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

694

export function StripeSkeleton() {

return (

Loading from Stripe…

</span>

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

</div>

))}

</div>

);

}