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

Usage, Billing settings and prepaid AI credit; fixes from the UX audit3d 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";

Merge Stripe Tax, the card fee on card payments, and one free workspace per person3d ago

10

import { type ReactNode, useState } from "react";

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

11

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

12

13

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

14

Merge Stripe Tax, the card fee on card payments, and one free workspace per person3d ago

15

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

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

16

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

17

import { Card } from "./billing";

18

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

Chat controls, public profiles, shadcn selects, and no Docs tab in a project2d ago

19

import { SelectField } from "./ui/select";

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

20

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

21

22

const FIELD =

23

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

26

return (

27

28

29

<input

30

name={name}

31

inputMode="decimal"

32

aria-label={label}

33

defaultValue={defaultValue}

34

autoComplete="off"

35

data-1p-ignore

36

data-lpignore="true"

37

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

38

/>

39

</span>

40

);

41

}

42

43

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

54

slug,

55

state,

56

status,

57

details,

58

report,

59

owner,

60

enabled,

61

staff,

62

error,

63

}: {

64

slug: string;

65

state: FeatureState | null;

66

status: PlanStatus;

67

details: BillingDetails | null;

68

report: UsageReport | null;

69

owner: boolean;

70

enabled: boolean;

71

staff: boolean;

72

error?: string;

73

}) {

74

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;

82

return (

83

<Card

84

id="plan"

85

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

86

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

87

title={

88

<>

89

{plan?.title ?? "g1t"}

Merge branch 'worktree-agent-ad7c6d88d93adc817'3d ago

90

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

91

{status.label}

92

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

93

</span>

94

</>

95

}

96

about={

97

on

98

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

100

}

101

aside={

102

103

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

Merge Stripe Tax, the card fee on card payments, and one free workspace per person3d ago

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

110

</span>

111

)}

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

112

</p>

113

}

114

>

115

116

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

122

</span>

123

</p>

124

125

126

</div>

127

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

128

</div>

129

) : (

130

131

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

136

</p>

137

)}

138

</div>

139

)}

140

141

142

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

149

150

151

152

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

157

</div>

158

</dl>

159

</details>

160

)}

161

</div>

162

</div>

163

164

165

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

174

175

176

Start the g1t plan

177

</SubmitButton>

178

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

179

180

Keep the plan

181

</SubmitButton>

182

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

183

184

Downgrade to free at the period's end

185

</SubmitButton>

186

) : null}

187

</Form>

188

)}

189

190

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

203

</Card>

204

);

205

}

206

207

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

Merge Stripe Tax, the card fee on card payments, and one free workspace per person3d ago

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

227

};

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

228

return (

229

<Card

230

id="ai-credit"

231

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

240

}

241

aside={

242

243

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

246

</span>

247

</p>

248

}

249

>

250

{credit.blocked && (

251

252

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

Merge Stripe Tax, the card fee on card payments, and one free workspace per person3d ago

259

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

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

260

261

262

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

263

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

264

265

266

267

${cents / 100}

268

</span>

269

</label>

270

))}

271

272

273

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

274

</label>

275

276

277

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

278

</SubmitButton>

279

</fieldset>

280

281

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

305

</span>

306

</li>

307

))}

308

</ul>

309

</details>

310

)}

311

<ErrorText>{error}</ErrorText>

312

</Card>

313

);

314

}

315

316

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

317

const r = credit.reload;

318

return (

319

320

321

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

Merge branch 'worktree-agent-ad7c6d88d93adc817'3d ago

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>

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

323

</div>

324

{r.failedAt && (

325

326

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

327

</p>

328

)}

329

{owner ? (

330

331

332

You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how.1d ago

333

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

334

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

343

</div>

344

345

Save auto-reload

346

</SubmitButton>

347

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

348

</Form>

349

) : (

350

351

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

352

</p>

353

)}

354

</div>

355

);

356

}

357

358

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

368

{of != null && (

369

370

371

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

372

373

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

374

</span>

375

</div>

376

Merge branch 'worktree-agent-ad7c6d88d93adc817'3d ago

377

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

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

378

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

379

380

))}

381

</div>

382

</div>

383

)}

384

{owner ? (

385

386

387

388

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

389

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

390

You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how.1d ago

391

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

392

{level}%

393

</label>

394

))}

395

</fieldset>

396

You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how.1d ago

397

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

398

Pause usage at 100%

399

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

403

404

</label>

405

406

Save alerts

407

</SubmitButton>

408

</Form>

409

) : (

410

411

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

412

</p>

413

)}

414

<ErrorText>{error}</ErrorText>

415

</Card>

416

);

417

}

418

419

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

423

return (

424

<Card

425

id="payment"

426

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

429

aside={

430

owner && enabled ? (

431

432

433

Manage in Stripe

434

435

</SubmitButton>

436

</Form>

437

) : null

438

}

439

>

440

441

{method ? (

442

443

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

463

</Card>

464

);

465

}

466

467

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

Merge Stripe Tax, the card fee on card payments, and one free workspace per person3d ago

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

}`,

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

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

485

486

487

{!security.on ? (

488

489

Turn on

490

</SubmitButton>

491

) : status === "canceling" ? (

492

493

Keep it on

494

</SubmitButton>

495

) : (

496

497

Turn off

498

</SubmitButton>

499

)}

500

</Form>

501

),

502

});

503

}

504

rows.push({

505

key: "deployments",

506

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

511

control: null,

512

});

513

return (

514

515

516

517

{rows.map((row) => (

518

519

520

521

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

522

</div>

523

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

Merge branch 'worktree-agent-ad7c6d88d93adc817'3d ago

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>

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

525

{row.control}

526

</li>

527

))}

528

</ul>

529

{error && (

530

531

<ErrorText>{error}</ErrorText>

532

</div>

533

)}

534

</section>

535

);

536

}

537

538

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

Merge Stripe Tax, the card fee on card payments, and one free workspace per person3d ago

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

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

566

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

567

["", "Automatic"],

568

["en", "English"],

569

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

570

["de", "German"],

571

["fr", "French"],

572

["es", "Spanish"],

573

["it", "Italian"],

574

["nl", "Dutch"],

575

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

576

["ja", "Japanese"],

577

["zh", "Chinese"],

578

];

579

580

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;

583

return (

Merge Stripe Tax, the card fee on card payments, and one free workspace per person3d ago

584

<Card

585

id="details"

586

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

600

</p>

601

)}

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

602

603

604

605

606

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

607

608

</label>

609

610

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

611

612

</label>

613

614

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

615

616

617

</label>

618

619

620

621

622

623

</div>

624

625

626

Chat controls, public profiles, shadcn selects, and no Docs tab in a project2d ago

627

<SelectField

628

name="taxIdType"

629

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

633

/>

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

634

635

</span>

Merge Stripe Tax, the card fee on card payments, and one free workspace per person3d ago

636

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

638

)}

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

639

</label>

640

641

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

642

643

</label>

644

645

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

Chat controls, public profiles, shadcn selects, and no Docs tab in a project2d ago

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

652

/>

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

653

</label>

654

{!disabled && (

655

656

657

Save invoice details

658

</SubmitButton>

659

</div>

660

)}

661

</fieldset>

662

</Form>

663

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

664

<ErrorText>{error}</ErrorText>

665

</Card>

666

);

667

}

668

669

// --- 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 ?? [];

675

return (

676

677

678

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

Merge branch 'worktree-agent-ad7c6d88d93adc817'3d ago

689

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

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

695

696

View

697

</a>

698

)}

699

{invoice.pdfUrl && (

700

701

PDF

702

</a>

703

)}

704

</span>

705

</li>

706

))}

707

</ul>

708

)}

709

</section>

710

);

711

}

712

713

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

714

export function StripeSkeleton() {

715

return (

716

717

718

Loading from Stripe…

719

</span>

720

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

721

722

723

724

725

</div>

726

))}

727

</div>

728

);

729

}