Skip to content
Sign up

flagon-io/g1t

public
00

Where people and agents ship software together. The open-source git platform for the whole job: issues, agents, checks and deploys to the edge.

gitagentscloudflarerustforgemcp
237 linesCodeBlameRaw
1import { Webhook } from "lucide-react";
2import type { ReactNode } from "react";
3
4import type { StripeStatus } from "@g1t/contracts";
5
6import type { Route } from "./+types/stripe";
7import { EveryWorkspaceDetachSection } from "~/components/test-detach";
8import { Badge, Button, EmptyState, Notice, Section, When } from "~/components/ui";
9import { admin } from "~/lib/services.server";
10import { requireStaff } from "~/lib/staff";
11import { EVERY_DETACH_INTENTS, type EveryDetachData, everyDetachAction } from "~/lib/test-detach.server";
12import { text } from "~/lib/forms";
13
14export const meta: Route.MetaFunction = () => [{ title: "Stripe · sudo" }, { name: "robots", content: "noindex, nofollow" }];
15
16export async function loader({ context }: Route.LoaderArgs) {
17 requireStaff(context);
18 return { status: await admin.stripe() };
19}
20
21type ActionData = { status: StripeStatus; fixed: true };
22
23export async function action({ request, context }: Route.ActionArgs) {
24 const staff = requireStaff(context);
25 // Detaching workspaces from test mode has its own forms (test-detach.tsx).
26 const form = await request.formData();
27 if (EVERY_DETACH_INTENTS.has(text(form, "intent"))) return everyDetachAction(form, staff);
28 return { status: await admin.stripe(true, staff.email), fixed: true } satisfies ActionData;
29}
30
31const MODE: Record<string, { label: string; tone: "warn" | "mint" | "danger" }> = {
32 test: { label: "Test mode", tone: "warn" },
33 live: { label: "Live", tone: "mint" },
34 off: { label: "Off", tone: "danger" },
35};
36
37const WEBHOOK_URL = "https://api.g1t.sh/stripe/webhook";
38
39export default function Stripe({ loaderData, actionData }: Route.ComponentProps) {
40 const detach = actionData && "exclude" in actionData ? (actionData as EveryDetachData) : null;
41 const result = actionData && "fixed" in actionData ? (actionData as ActionData) : undefined;
42 const status = result?.status ?? loaderData.status;
43 const fixed = result != null;
44 const mode = MODE[status.mode] ?? { label: status.mode, tone: "warn" as const };
45 const { webhook } = status;
46 const needsFix = webhook != null && (webhook.status !== "enabled" || status.missingEvents.length > 0);
47 const ready = status.mode !== "off" && status.secretSet && webhook != null && !needsFix;
48
49 return (
50 <main id="top" className="mx-auto max-w-6xl scroll-mt-20 px-4 py-8 sm:py-10">
51 <div className="flex flex-wrap items-start justify-between gap-4">
52 <div>
53 <h1 className="text-2xl font-semibold tracking-tight">Stripe</h1>
54 <p className="mt-1 text-sm text-muted">How billing hears from Stripe: the destination in Stripe, its signing secret here, and what it sent lately.</p>
55 </div>
56 <Badge tone={mode.tone}>{mode.label}</Badge>
57 </div>
58
59 <div className="mt-6 space-y-3">
60 {status.error && <Notice tone="error">{status.error}</Notice>}
61 {fixed && !status.error && <Notice tone="ok">Destination checked: enabled, and sending every event billing handles.</Notice>}
62 {status.mode === "off" && <Notice tone="warn">Billing has no Stripe key (STRIPE_SECRET_KEY), so nothing reaches Stripe.</Notice>}
63 {ready && <Notice tone="ok">Ready: Stripe sends to billing, and billing can check what it sends.</Notice>}
64 </div>
65
66 <GoLiveChecklist status={status} />
67
68 <Section
69 title="Webhook"
70 description="Made in Stripe's dashboard; its signing secret is the billing Worker's secret STRIPE_WEBHOOK_SECRET. Billing keeps the destination's events and enables it again if Stripe turns it off; it never changes the secret."
71 className="mt-6"
72 actions={
73 needsFix ? (
74 <form method="post" action="/stripe#top">
75 <Button type="submit" variant="lavender">
76 <Webhook size={14} />
77 Fix destination
78 </Button>
79 </form>
80 ) : null
81 }
82 >
83 <dl className="grid gap-x-6 gap-y-3 text-sm sm:grid-cols-[max-content_minmax(0,1fr)]">
84 <dt className="text-muted">Signing secret</dt>
85 <dd>
86 {status.secretSet ? (
87 <Badge tone="mint">Set</Badge>
88 ) : (
89 <span className="text-fg-soft">
90 <Badge tone="danger">Not set</Badge> Every event is refused until it is. In Stripe: the destination, Signing secret, Reveal; then, in{" "}
91 <span className="font-mono text-xs">services/billing</span>,{" "}
92 <span className="font-mono text-xs">npx wrangler secret put STRIPE_WEBHOOK_SECRET</span>.
93 </span>
94 )}
95 </dd>
96 <dt className="text-muted">Destination</dt>
97 <dd className="min-w-0">
98 {webhook ? (
99 <span className="flex flex-wrap items-center gap-2">
100 <span className="font-mono text-xs break-all">{webhook.url}</span>
101 <Badge tone={webhook.status === "enabled" ? "mint" : "danger"}>{webhook.status}</Badge>
102 <span className="font-mono text-xs text-faint">{webhook.endpointId}</span>
103 </span>
104 ) : status.mode === "off" ? (
105 <span className="text-muted">Not checked without a key.</span>
106 ) : (
107 <span className="text-fg-soft">
108 None in {mode.label.toLowerCase()}. In Stripe: Developers, Webhooks, Add destination, endpoint URL{" "}
109 <span className="font-mono text-xs">{WEBHOOK_URL}</span>, any events (billing adds what it needs here). Then set its secret.
110 </span>
111 )}
112 </dd>
113 {webhook && (
114 <>
115 <dt className="text-muted">Made</dt>
116 <dd className="text-fg-soft">
117 <When at={webhook.createdAt} time />
118 </dd>
119 <dt className="text-muted">Events</dt>
120 <dd className="flex flex-wrap gap-1.5">
121 {webhook.events.map((event) => (
122 <span key={event} className="rounded border border-line bg-bg px-1.5 py-0.5 font-mono text-xs">
123 {event}
124 </span>
125 ))}
126 {status.missingEvents.map((event) => (
127 <span
128 key={event}
129 className="rounded border border-danger/40 bg-danger/5 px-1.5 py-0.5 font-mono text-xs text-danger"
130 title="Billing handles this; the destination does not send it"
131 >
132 {event} missing
133 </span>
134 ))}
135 </dd>
136 </>
137 )}
138 </dl>
139 </Section>
140
141 <EveryWorkspaceDetachSection
142 live={status.mode === "live"}
143 result={detach?.everyDetach ?? null}
144 error={detach?.everyDetachError ?? null}
145 exclude={detach?.exclude ?? null}
146 />
147
148 <Section title="Recent events" description="What Stripe sent, newest first, and what billing did with it." className="mt-6">
149 {status.recentEvents.length === 0 ? (
150 <EmptyState title="No events yet" />
151 ) : (
152 <div className="-mx-4 -my-4 overflow-x-auto sm:-mx-5 sm:-my-5">
153 <table className="w-full min-w-xl text-sm">
154 <thead>
155 <tr className="border-b border-line text-left text-xs text-muted">
156 <th className="px-4 py-2 font-medium sm:pl-5">When</th>
157 <th className="px-4 py-2 font-medium">Type</th>
158 <th className="px-4 py-2 font-medium sm:pr-5">Outcome</th>
159 </tr>
160 </thead>
161 <tbody>
162 {status.recentEvents.map((event) => (
163 <tr key={event.id} className="border-b border-line align-top last:border-0">
164 <td className="px-4 py-2.5 text-xs whitespace-nowrap text-muted sm:pl-5">
165 <When at={event.receivedAt} time />
166 </td>
167 <td className="px-4 py-2.5">
168 <p className="font-mono text-xs">{event.kind}</p>
169 <p className="font-mono text-xs text-faint">{event.id}</p>
170 </td>
171 <td className="px-4 py-2.5 wrap-break-word text-fg-soft sm:pr-5">{event.outcome}</td>
172 </tr>
173 ))}
174 </tbody>
175 </table>
176 </div>
177 )}
178 </Section>
179 </main>
180 );
181}
182
183// --- Go-live checklist ----------------------------------------------------------------
184//
185// Read-only. Stripe Tax and the Customer Portal come from billing's Stripe
186// status: `tax` is Stripe's GET /v1/tax/settings (`active`, or `pending`
187// with `missingFields`), `portal` the configuration billing makes
188// (metadata g1t=billing). Either is null when it could not be read; the
189// row then says what to check in Stripe's dashboard.
190
191function CheckRow({ label, ok, children }: { label: string; ok: boolean | null; children: ReactNode }) {
192 return (
193 <>
194 <dt className="text-muted">{label}</dt>
195 <dd className="flex flex-wrap items-center gap-2 text-fg-soft">
196 <Badge tone={ok == null ? "warn" : ok ? "mint" : "danger"}>{ok == null ? "Check in Stripe" : ok ? "Ready" : "Not ready"}</Badge>
197 <span>{children}</span>
198 </dd>
199 </>
200 );
201}
202
203function GoLiveChecklist({ status }: { status: StripeStatus }) {
204 const webhookOk = status.webhook != null && status.webhook.status === "enabled" && status.missingEvents.length === 0;
205 const tax = status.tax;
206 const portal = status.portal;
207 return (
208 <Section
209 title="Go-live checklist"
210 description="What has to be true before live payments: a live key, the webhook, Stripe Tax and the Customer Portal. Read-only."
211 className="mt-6"
212 >
213 <dl className="grid gap-x-6 gap-y-3 text-sm sm:grid-cols-[max-content_minmax(0,1fr)]">
214 <CheckRow label="Live key" ok={status.mode === "live"}>
215 {status.mode === "live" ? "Billing uses a live key." : `Billing's key is in ${status.mode === "off" ? "no" : status.mode} mode.`}
216 </CheckRow>
217 <CheckRow label="Webhook" ok={status.secretSet && webhookOk}>
218 {status.secretSet && webhookOk ? "Enabled, signed, and sending every event billing handles." : "See Webhook below."}
219 </CheckRow>
220 <CheckRow label="Stripe Tax" ok={status.mode === "off" || tax == null ? null : tax.status === "active"}>
221 {tax == null
222 ? "Not read. In Stripe: Tax, Settings: status Active, with the head office address and registrations."
223 : tax.status === "active"
224 ? "Active."
225 : `${tax.status}${tax.missingFields.length ? `: missing ${tax.missingFields.join(", ")}` : ""}.`}
226 </CheckRow>
227 <CheckRow label="Customer Portal" ok={status.mode === "off" || portal === undefined ? null : portal != null && portal.active}>
228 {portal === undefined
229 ? "Not read. In Stripe: Settings, Billing, Customer portal: the configuration with metadata g1t=billing, active."
230 : portal
231 ? `${portal.configurationId}: ${portal.active ? "active" : "inactive; billing turns it back on the next time someone opens Manage billing"}.`
232 : "No configuration yet: billing makes one the first time someone opens Manage billing."}
233 </CheckRow>
234 </dl>
235 </Section>
236 );
237}