Sign in

flagon-io/g1t

public

g1t/apps/sudo/app/routes/stripe.tsx

160 lines7,476 bytesCodeBlame
1import { Webhook } from "lucide-react";
2
3import type { StripeStatus } from "@g1t/contracts";
4
5import type { Route } from "./+types/stripe";
6import { Badge, Button, EmptyState, Notice, Section, When } from "~/components/ui";
7import { admin } from "~/lib/services.server";
8import { requireStaff } from "~/lib/staff";
9
10export const meta: Route.MetaFunction = () => [{ title: "Stripe · sudo" }, { name: "robots", content: "noindex, nofollow" }];
11
12export async function loader({ context }: Route.LoaderArgs) {
13 requireStaff(context);
14 return { status: await admin.stripe() };
15}
16
17type ActionData = { status: StripeStatus; fixed: true };
18
19export async function action({ context }: Route.ActionArgs) {
20 const staff = requireStaff(context);
21 return { status: await admin.stripe(true, staff.email), fixed: true } satisfies ActionData;
22}
23
24const MODE: Record<string, { label: string; tone: "warn" | "mint" | "danger" }> = {
25 test: { label: "Test mode", tone: "warn" },
26 live: { label: "Live", tone: "mint" },
27 off: { label: "Off", tone: "danger" },
28};
29
30const WEBHOOK_URL = "https://api.g1t.sh/stripe/webhook";
31
32export default function Stripe({ loaderData, actionData }: Route.ComponentProps) {
33 const result = actionData as ActionData | undefined;
34 const status = result?.status ?? loaderData.status;
35 const fixed = result != null;
36 const mode = MODE[status.mode] ?? { label: status.mode, tone: "warn" as const };
37 const { webhook } = status;
38 const needsFix = webhook != null && (webhook.status !== "enabled" || status.missingEvents.length > 0);
39 const ready = status.mode !== "off" && status.secretSet && webhook != null && !needsFix;
40
41 return (
42 <main id="top" className="mx-auto max-w-6xl scroll-mt-20 px-4 py-8 sm:py-10">
43 <div className="flex flex-wrap items-start justify-between gap-4">
44 <div>
45 <h1 className="text-2xl font-semibold tracking-tight">Stripe</h1>
46 <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>
47 </div>
48 <Badge tone={mode.tone}>{mode.label}</Badge>
49 </div>
50
51 <div className="mt-6 space-y-3">
52 {status.error && <Notice tone="error">{status.error}</Notice>}
53 {fixed && !status.error && <Notice tone="ok">Destination checked: enabled, and sending every event billing handles.</Notice>}
54 {status.mode === "off" && <Notice tone="warn">Billing has no Stripe key (STRIPE_SECRET_KEY), so nothing reaches Stripe.</Notice>}
55 {ready && <Notice tone="ok">Ready: Stripe sends to billing, and billing can check what it sends.</Notice>}
56 </div>
57
58 <Section
59 title="Webhook"
60 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."
61 className="mt-6"
62 actions={
63 needsFix ? (
64 <form method="post" action="/stripe#top">
65 <Button type="submit" variant="lavender">
66 <Webhook size={14} />
67 Fix destination
68 </Button>
69 </form>
70 ) : null
71 }
72 >
73 <dl className="grid gap-x-6 gap-y-3 text-sm sm:grid-cols-[max-content_minmax(0,1fr)]">
74 <dt className="text-muted">Signing secret</dt>
75 <dd>
76 {status.secretSet ? (
77 <Badge tone="mint">Set</Badge>
78 ) : (
79 <span className="text-fg-soft">
80 <Badge tone="danger">Not set</Badge> Every event is refused until it is. In Stripe: the destination, Signing secret, Reveal; then, in{" "}
81 <span className="font-mono text-xs">services/billing</span>,{" "}
82 <span className="font-mono text-xs">npx wrangler secret put STRIPE_WEBHOOK_SECRET</span>.
83 </span>
84 )}
85 </dd>
86 <dt className="text-muted">Destination</dt>
87 <dd className="min-w-0">
88 {webhook ? (
89 <span className="flex flex-wrap items-center gap-2">
90 <span className="font-mono text-xs break-all">{webhook.url}</span>
91 <Badge tone={webhook.status === "enabled" ? "mint" : "danger"}>{webhook.status}</Badge>
92 <span className="font-mono text-xs text-faint">{webhook.endpointId}</span>
93 </span>
94 ) : status.mode === "off" ? (
95 <span className="text-muted">Not checked without a key.</span>
96 ) : (
97 <span className="text-fg-soft">
98 None in {mode.label.toLowerCase()}. In Stripe: Developers, Webhooks, Add destination, endpoint URL{" "}
99 <span className="font-mono text-xs">{WEBHOOK_URL}</span>, any events (billing adds what it needs here). Then set its secret.
100 </span>
101 )}
102 </dd>
103 {webhook && (
104 <>
105 <dt className="text-muted">Made</dt>
106 <dd className="text-fg-soft">
107 <When at={webhook.createdAt} time />
108 </dd>
109 <dt className="text-muted">Events</dt>
110 <dd className="flex flex-wrap gap-1.5">
111 {webhook.events.map((event) => (
112 <span key={event} className="rounded border border-line bg-bg px-1.5 py-0.5 font-mono text-xs">
113 {event}
114 </span>
115 ))}
116 {status.missingEvents.map((event) => (
117 <span key={event} className="rounded border border-danger/40 bg-danger/5 px-1.5 py-0.5 font-mono text-xs text-danger" title="Billing handles this; the destination does not send it">
118 {event} missing
119 </span>
120 ))}
121 </dd>
122 </>
123 )}
124 </dl>
125 </Section>
126
127 <Section title="Recent events" description="What Stripe sent, newest first, and what billing did with it." className="mt-6">
128 {status.recentEvents.length === 0 ? (
129 <EmptyState title="No events yet" />
130 ) : (
131 <div className="-mx-4 -my-4 overflow-x-auto sm:-mx-5 sm:-my-5">
132 <table className="w-full min-w-xl text-sm">
133 <thead>
134 <tr className="border-b border-line text-left text-xs text-muted">
135 <th className="px-4 py-2 font-medium sm:pl-5">When</th>
136 <th className="px-4 py-2 font-medium">Type</th>
137 <th className="px-4 py-2 font-medium sm:pr-5">Outcome</th>
138 </tr>
139 </thead>
140 <tbody>
141 {status.recentEvents.map((event) => (
142 <tr key={event.id} className="border-b border-line align-top last:border-0">
143 <td className="px-4 py-2.5 text-xs whitespace-nowrap text-muted sm:pl-5">
144 <When at={event.receivedAt} time />
145 </td>
146 <td className="px-4 py-2.5">
147 <p className="font-mono text-xs">{event.kind}</p>
148 <p className="font-mono text-xs text-faint">{event.id}</p>
149 </td>
150 <td className="px-4 py-2.5 wrap-break-word text-fg-soft sm:pr-5">{event.outcome}</td>
151 </tr>
152 ))}
153 </tbody>
154 </table>
155 </div>
156 )}
157 </Section>
158 </main>
159 );
160}