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

24

25

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 {

44

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

45

}

46

47

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

48

49

/**

50

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

51

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

52

*/

53

export function PlanSummary({

slug,

state,

status,

details,

report,

owner,

enabled,

staff,

error,

}: {

slug: string;

state: FeatureState | null;

66

status: PlanStatus;

67

details: BillingDetails | null;

68

report: UsageReport | null;

owner: boolean;

enabled: boolean;

staff: boolean;

error?: string;

}) {

const plan = state?.plan;

75

const subscription = state?.subscription ?? null;

76

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

77

const now = new Date();

78

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

79

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

80

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

81

const upcoming = details?.upcoming;

return (

<Card

id="plan"

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

86

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

87

title={

88

<>

89

{plan?.title ?? "g1t"}

90

91

{status.label}

92

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

</span>

</>

}

about={

on

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

99

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

104

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

105

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

106

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

107

108

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

109

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

</span>

)}

</p>

}

>

{report?.included ? (

117

118

119

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

120

121

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

132

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

133

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

134

135

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

</p>

)}

</div>

)}

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

143

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

144

</p>

145

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

146

{upcoming && (

147

148

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

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

153

</div>

154

155

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

156

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

</div>

</dl>

</details>

)}

</div>

</div>

<FileText size={14} /> Usage

166

</Link>

167

168

<ReceiptText size={14} /> Invoices

169

</a>

170

{owner && enabled && (

171

172

173

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

Start the g1t plan

</SubmitButton>

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

Keep the plan

</SubmitButton>

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

183

184

Downgrade to free at the period's end

</SubmitButton>

) : null}

</Form>

)}

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

191

</a>

192

</div>

193

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

194

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

195

)}

196

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

197

198

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

199

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

200

</p>

201

)}

202

<ErrorText>{error}</ErrorText>

</Card>

);

}

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

208

209

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

210

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

211

const rate = credit.agentRateMicros;

212

const fee = credit.cardFee;

213

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

214

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

215

const chosenFee = cardFeeCents(chosenCents, fee);

216

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

217

const feeText = !fee.on

218

? `${feeAndTax(0)}.`

219

: chosenCents > 0

220

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

221

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

222

const choose = (form: HTMLFormElement) => {

223

const data = new FormData(form);

224

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

225

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

226

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

};

return (

<Card

id="ai-credit"

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

232

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

233

title="AI credit"

234

about={

235

credit.freeViaDiscount

236

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

237

: credit.postpaid

238

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

239

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

244

245

{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

253

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

254

</p>

255

)}

256

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

257

<>

258

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

259

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

260

261

262

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

263

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

282

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

283

</p>

284

</Form>

285

) : !credit.canBuy ? (

286

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

287

) : (

288

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

289

)}

290

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

291

</>

292

)}

293

{credit.grants.length > 0 && (

294

295

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

296

297

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

298

299

300

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

301

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

302

</span>

303

304

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

317

const r = credit.reload;

return (

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

322

<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

335

</label>

336

337

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

338

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

339

</div>

340

341

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

342

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

359

360

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

361

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

362

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

363

const pause = limit.pauseAtLimit ?? true;

364

const spent = limit.spentMicros ?? 0;

365

const of = limit.spendLimitMicros;

366

return (

367

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

372

373

{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)}%` }} />

378

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

))}

</div>

</div>

)}

{owner ? (

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

389

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

400

</label>

401

402

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

412

</p>

413

)}

414

<ErrorText>{error}</ErrorText>

</Card>

);

}

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

420

421

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

422

const method = details?.paymentMethod;

return (

<Card

id="payment"

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

427

title="Payment method"

428

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>

444

{method.last4 && (

445

<span>

446

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

447

</span>

448

)}

449

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

450

451

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

452

</span>

453

)}

454

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

455

</p>

456

) : (

457

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

458

)}

459

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

460

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

461

</div>

462

<ErrorText>{error}</ErrorText>

</Card>

);

}

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

468

469

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

470

const planOn = !!plan?.on;

471

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

472

if (security) {

473

const status = security.subscription?.status;

474

rows.push({

475

key: "security",

476

name: security.plan.title,

477

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

478

security.plan.cardFeeCents ? `Plus a ${dollars(security.plan.cardFeeCents * 10_000)} card processing fee a month, and tax where it applies.` : "Plus tax where it applies."

479

}`,

480

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

481

on: security.on,

482

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

483

control:

484

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

{!security.on ? (

Turn on

</SubmitButton>

) : status === "canceling" ? (

Keep it on

</SubmitButton>

) : (

Turn off

</SubmitButton>

)}

</Form>

),

});

}

rows.push({

key: "deployments",

name: "Production deployments",

507

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

508

price: "With the plan",

509

on: planOn,

510

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

control: null,

});

return (

{rows.map((row) => (

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

522

</div>

523

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

524

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

539

540

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

541

["", "None"],

542

["eu_vat", "EU VAT"],

543

["gb_vat", "UK VAT"],

544

["us_ein", "US EIN"],

545

["ca_bn", "Canadian BN"],

546

["au_abn", "Australian ABN"],

547

["ch_vat", "Swiss VAT"],

548

["no_vat", "Norwegian VAT"],

549

["in_gst", "Indian GST"],

550

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

551

["br_cnpj", "Brazilian CNPJ"],

552

["mx_rfc", "Mexican RFC"],

553

["sg_uen", "Singapore UEN"],

554

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

555

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

556

];

557

558

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

559

const TAX_ID_STATUS: Record<string, string> = {

560

verified: "Verified by Stripe.",

561

pending: "Stripe is checking it.",

562

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

563

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

564

};

565

566

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

567

["", "Automatic"],

568

["en", "English"],

569

["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 }) {

581

const a = details?.address;

582

const disabled = !owner || !enabled;

return (

<Card

id="details"

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

587

title="Invoice details"

588

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

589

>

590

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

591

592

{details.taxAddressNeededAt

593

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

594

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

595

</p>

596

)}

597

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

598

599

{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 ?? ""}

630

aria-label="Kind of tax ID"

631

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

632

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

/>

</span>

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

637

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

646

<SelectField

647

name="language"

648

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

649

aria-label="Invoice language"

650

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

651

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

664

<ErrorText>{error}</ErrorText>

</Card>

);

}

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

670

671

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

672

673

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

674

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

return (

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

679

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

680

</div>

681

{invoices.length === 0 ? (

682

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

683

) : (

684

685

{invoices.map((invoice) => (

686

687

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

688

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

689

690

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

691

</span>

692

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

693

694

{invoice.hostedUrl && (

View

</a>

)}

{invoice.pdfUrl && (

PDF

</a>

)}

</span>

</li>

))}

</ul>

)}

</section>

);

}

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

714

export function StripeSkeleton() {

return (

Loading from Stripe…

</span>

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

</div>

))}

</div>

);

}