Sign in

pulls/pr_01m47d15m3e54sn21z27rpy5n9

public

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

152 lines7,230 bytesCodeBlame
1import { Webhook } from "lucide-react";
2import { Link } from "react-router";
3
4import type { StripeStatus } from "@g1t/contracts";
5
6import type { Route } from "./+types/stripe";
7import { Badge, Button, EmptyState, Notice, Section, When } from "~/components/ui";
8import { text } from "~/lib/forms";
9import { admin } from "~/lib/services.server";
10import { requireStaff } from "~/lib/staff";
11
12export const meta: Route.MetaFunction = () => [{ title: "Stripe · sudo" }, { name: "robots", content: "noindex, nofollow" }];
13
14export async function loader({ context }: Route.LoaderArgs) {
15 requireStaff(context);
16 return { status: await admin.stripe() };
17}
18
19type ActionData = { review: true } | { status: StripeStatus; registered: true };
20
21export async function action({ request, context }: Route.ActionArgs) {
22 const staff = requireStaff(context);
23 const form = await request.formData();
24 if (text(form, "intent") !== "webhook") return { review: true } satisfies ActionData;
25 if (text(form, "confirm") !== "yes") return { review: true } satisfies ActionData;
26 return { status: await admin.stripe(true, staff.email), registered: true } satisfies ActionData;
27}
28
29const MODE: Record<string, { label: string; tone: "warn" | "mint" | "danger" }> = {
30 test: { label: "Test mode", tone: "warn" },
31 live: { label: "Live", tone: "mint" },
32 off: { label: "Off", tone: "danger" },
33};
34
35export default function Stripe({ loaderData, actionData }: Route.ComponentProps) {
36 const result = actionData as ActionData | undefined;
37 const status = result && "status" in result ? result.status : loaderData.status;
38 const reviewing = result != null && "review" in result;
39 const registered = result != null && "registered" in result;
40 const mode = MODE[status.mode] ?? { label: status.mode, tone: "warn" as const };
41 const { webhook } = status;
42 const verb = webhook ? "Replace" : "Register";
43
44 return (
45 <main id="top" className="mx-auto max-w-6xl scroll-mt-20 px-4 py-8 sm:py-10">
46 <div className="flex flex-wrap items-start justify-between gap-4">
47 <div>
48 <h1 className="text-2xl font-semibold tracking-tight">Stripe</h1>
49 <p className="mt-1 text-sm text-muted">How billing talks to Stripe: its keys' mode, the webhook Stripe calls, and what it sent lately.</p>
50 </div>
51 <Badge tone={mode.tone}>{mode.label}</Badge>
52 </div>
53
54 <div className="mt-6 space-y-3">
55 {status.error && <Notice tone="error">{status.error}</Notice>}
56 {registered && !status.error && <Notice tone="ok">Webhook registered. Stripe sends its events to it from now on.</Notice>}
57 {status.mode === "off" && <Notice tone="warn">Billing has no Stripe key, so nothing reaches Stripe and no webhook can be registered.</Notice>}
58 {reviewing && (
59 <section id="review" className={`scroll-mt-20 rounded-lg border p-4 sm:p-5 ${webhook ? "border-warn/40 bg-warn/5" : "border-merged/40 bg-merged/5"}`}>
60 <h2 className="font-semibold tracking-tight">{verb} the {mode.label.toLowerCase()} webhook?</h2>
61 <p className="mt-2 text-sm text-muted">
62 Billing {webhook ? "deletes the endpoint it made before, then asks" : "asks"} Stripe for a new webhook endpoint, and keeps
63 its signing secret itself; nobody sees it.
64 </p>
65 <form method="post" action="/stripe#top" className="mt-4 flex flex-wrap items-center gap-2">
66 <input type="hidden" name="intent" value="webhook" />
67 <input type="hidden" name="confirm" value="yes" />
68 <Button type="submit" variant={webhook ? "danger" : "lavender"}>
69 {verb} webhook
70 </Button>
71 <Link to="/stripe" className="px-2 text-sm text-muted hover:text-fg">
72 Cancel
73 </Link>
74 </form>
75 </section>
76 )}
77 </div>
78
79 <Section
80 title="Webhook"
81 description="Replacing it makes a new signing secret, kept only in billing. Do it once per mode, and again after switching to live keys."
82 className="mt-6"
83 actions={
84 status.mode !== "off" && !reviewing ? (
85 <form method="post" action="/stripe#review">
86 <input type="hidden" name="intent" value="webhook" />
87 <Button type="submit" variant="quiet">
88 <Webhook size={14} />
89 {verb} webhook
90 </Button>
91 </form>
92 ) : null
93 }
94 >
95 {webhook ? (
96 <dl className="grid gap-x-6 gap-y-3 text-sm sm:grid-cols-[max-content_minmax(0,1fr)]">
97 <dt className="text-muted">URL</dt>
98 <dd className="font-mono text-xs break-all">{webhook.url}</dd>
99 <dt className="text-muted">Endpoint id</dt>
100 <dd className="font-mono text-xs break-all text-fg-soft">{webhook.endpointId}</dd>
101 <dt className="text-muted">Events</dt>
102 <dd className="flex flex-wrap gap-1.5">
103 {webhook.events.map((event) => (
104 <span key={event} className="rounded border border-line bg-bg px-1.5 py-0.5 font-mono text-xs">
105 {event}
106 </span>
107 ))}
108 </dd>
109 <dt className="text-muted">Registered</dt>
110 <dd className="text-fg-soft">
111 <When at={webhook.createdAt} time /> by <span className="font-mono">{webhook.createdBy}</span>
112 </dd>
113 </dl>
114 ) : (
115 <p className="text-sm text-muted">Not registered. Until it is, billing does not hear about payments, disputes or invoices from Stripe.</p>
116 )}
117 </Section>
118
119 <Section title="Recent events" description="What Stripe sent, newest first, and what billing did with it." className="mt-6">
120 {status.recentEvents.length === 0 ? (
121 <EmptyState title="No events yet" />
122 ) : (
123 <div className="-mx-4 -my-4 overflow-x-auto sm:-mx-5 sm:-my-5">
124 <table className="w-full min-w-xl text-sm">
125 <thead>
126 <tr className="border-b border-line text-left text-xs text-muted">
127 <th className="px-4 py-2 font-medium sm:pl-5">When</th>
128 <th className="px-4 py-2 font-medium">Type</th>
129 <th className="px-4 py-2 font-medium sm:pr-5">Outcome</th>
130 </tr>
131 </thead>
132 <tbody>
133 {status.recentEvents.map((event) => (
134 <tr key={event.id} className="border-b border-line align-top last:border-0">
135 <td className="px-4 py-2.5 text-xs whitespace-nowrap text-muted sm:pl-5">
136 <When at={event.receivedAt} time />
137 </td>
138 <td className="px-4 py-2.5">
139 <p className="font-mono text-xs">{event.kind}</p>
140 <p className="font-mono text-xs text-faint">{event.id}</p>
141 </td>
142 <td className="px-4 py-2.5 wrap-break-word text-fg-soft sm:pr-5">{event.outcome}</td>
143 </tr>
144 ))}
145 </tbody>
146 </table>
147 </div>
148 )}
149 </Section>
150 </main>
151 );
152}