@meith/plugin-dues 0.6.0 → 0.8.0

package/src/ui/admin.tsx

@@ -8,19 +8,18 @@ import { describeBilling, isLifetime, loadPlans, MAX_PLAN_DAYS } from '../plans'
 import {
   allMemberships,
   attentionCount,
+  type CodeRow,
   listCodes,
+  type MembershipRow,
   monthlyTotals,
   ordersNeedingAttention,
+  type PlanRow,
   recentEvents,
   recentLedger,
-  type CodeRow,
-  type MembershipRow,
-  type PlanRow,
 } from '../store'
 import { SUBSCRIBED_EVENT_TYPES } from '../stripe/events'
 
-const QUIET_PANEL =
-  'rounded-lg border border-border bg-card p-4 text-sm text-muted-foreground'
+const QUIET_PANEL = 'rounded-lg border border-border bg-card p-4 text-sm text-muted-foreground'
 
 const CARD =
   'flex flex-col gap-3 rounded-lg border border-border bg-card p-4 text-card-foreground ' +
@@ -36,8 +35,8 @@ const ACT_BUTTON =
 const QUIET_BUTTON =
   'inline-flex h-8 items-center justify-center rounded-md border border-border px-3 text-sm'
 
-function fmt(date: Date): string {
-  return date.toISOString().slice(0, 16).replace('T', ' ')
+function fmt(date: Date, context: PluginAdminPageContext): string {
+  return context.t.parts(date, { dateStyle: 'medium', timeStyle: 'short', timeZone: 'UTC' })
 }
 
 function GoodNotice({ children }: { children: ReactNode }) {
@@ -59,13 +58,11 @@ function BadNotice({ children }: { children: ReactNode }) {
   )
 }
 
-function Attention({ count }: { count: number }) {
+function Attention({ count, context }: { count: number; context: PluginAdminPageContext }) {
   if (count === 0) return null
   return (
     <p className="rounded-lg border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm">
-      <strong>{count}</strong> record{count === 1 ? ' needs' : 's need'} attention —
-      a payment that could not become a membership, or an amount that did not match its
-      order. The members screen lists {count === 1 ? 'it' : 'them'} first.
+      {context.t.t('dues.admin.status.attention', { count })}
     </p>
   )
 }
@@ -87,26 +84,31 @@ export async function StatusPage({
 
   return (
     <div className="flex flex-col gap-4">
-      {context.query.cleared !== undefined && <GoodNotice>Flag cleared.</GoodNotice>}
+      {context.query.cleared !== undefined && (
+        <GoodNotice>{context.t.t('dues.admin.status.flagCleared')}</GoodNotice>
+      )}
       {context.query.error !== undefined && (
-        <BadNotice>That flag could not be found — it may already be cleared.</BadNotice>
+        <BadNotice>{context.t.t('dues.admin.status.flagMissing')}</BadNotice>
       )}
-      <Attention count={attention} />
+      <Attention count={attention} context={context} />
 
       {flaggedOrders.length > 0 && (
         <section className={CARD}>
-          <h2 className="font-heading text-lg font-semibold">Orders needing attention</h2>
+          <h2 className="font-heading text-lg font-semibold">
+            {context.t.t('dues.admin.status.orders')}
+          </h2>
           <p className="text-sm text-muted-foreground">
-            Money moved but the order could not settle cleanly — most often an amount
-            that did not match. Check the payment in Stripe&rsquo;s dashboard, put it
-            right there, then clear the flag here.
+            {context.t.t('dues.admin.status.ordersText')}
           </p>
           <ul className="flex flex-col divide-y divide-border text-sm">
             {flaggedOrders.map((order) => (
               <li key={order.id} className="flex flex-wrap items-center justify-between gap-2 py-2">
                 <span>
-                  Order {order.id} — {order.planName},{' '}
-                  {formatMinor(order.amountMinor, order.currency)}
+                  {context.t.t('dues.admin.status.order', {
+                    id: order.id,
+                    plan: order.planName,
+                    amount: formatMinor(order.amountMinor, order.currency, context.locale),
+                  })}
                   <span className="block text-xs text-muted-foreground">
                     {order.needsAttention}
                   </span>
@@ -114,7 +116,7 @@ export async function StatusPage({
                 <form method="post" action="/admin/api/plugins/dues/attention/clear">
                   <input type="hidden" name="order" value={order.id} />
                   <button type="submit" className={QUIET_BUTTON}>
-                    Clear the flag
+                    {context.t.t('dues.admin.status.clear')}
                   </button>
                 </form>
               </li>
@@ -124,34 +126,40 @@ export async function StatusPage({
       )}
 
       <section className={CARD}>
-        <h2 className="font-heading text-lg font-semibold">Is it working?</h2>
+        <h2 className="font-heading text-lg font-semibold">
+          {context.t.t('dues.admin.status.working')}
+        </h2>
         <dl className="flex flex-col gap-1 text-sm">
           <div className="flex justify-between gap-2">
-            <dt className="text-muted-foreground">Stripe secret key</dt>
-            <dd>{keySet ? 'set' : 'not set — nothing can be bought'}</dd>
+            <dt className="text-muted-foreground">{context.t.t('dues.admin.status.secret')}</dt>
+            <dd>
+              {context.t.t(keySet ? 'dues.admin.status.keySet' : 'dues.admin.status.keyUnset')}
+            </dd>
           </div>
           <div className="flex justify-between gap-2">
-            <dt className="text-muted-foreground">Webhook signing secret</dt>
-            <dd>{webhookSet ? 'set' : 'not set — payments cannot confirm'}</dd>
+            <dt className="text-muted-foreground">
+              {context.t.t('dues.admin.status.webhookSecret')}
+            </dt>
+            <dd>
+              {context.t.t(
+                webhookSet ? 'dues.admin.status.keySet' : 'dues.admin.status.webhookUnset',
+              )}
+            </dd>
           </div>
           <div className="flex justify-between gap-2">
-            <dt className="text-muted-foreground">Grace after a failed renewal</dt>
-            <dd>{config.graceDays} days</dd>
+            <dt className="text-muted-foreground">{context.t.t('dues.admin.status.grace')}</dt>
+            <dd>{context.t.t('dues.admin.status.days', { count: config.graceDays })}</dd>
           </div>
         </dl>
-        <p className="text-xs text-muted-foreground">
-          Keys resolve environment-first: the settings form below this page shows which
-          source is winning.
-        </p>
+        <p className="text-xs text-muted-foreground">{context.t.t('dues.admin.status.source')}</p>
       </section>
 
       <section className={CARD}>
-        <h2 className="font-heading text-lg font-semibold">The webhook to create</h2>
+        <h2 className="font-heading text-lg font-semibold">
+          {context.t.t('dues.admin.status.webhook')}
+        </h2>
         <p className="text-sm text-muted-foreground">
-          In the Stripe dashboard, add an endpoint at
-          <code className="mx-1 text-xs">/api/plugins/dues/hook/stripe</code>
-          on this board&rsquo;s public address, subscribed to exactly these events, and
-          put its signing secret in the settings:
+          {context.t.t('dues.admin.status.webhookText')}
         </p>
         <p className="flex flex-wrap gap-x-3 gap-y-1">
           {SUBSCRIBED_EVENT_TYPES.map((type) => (
@@ -163,70 +171,72 @@ export async function StatusPage({
       </section>
 
       <section className={CARD}>
-        <h2 className="font-heading text-lg font-semibold">Plans on sale</h2>
+        <h2 className="font-heading text-lg font-semibold">
+          {context.t.t('dues.admin.status.plans')}
+        </h2>
         <p className="text-sm text-muted-foreground">
-          Plans are made and changed on the{' '}
-          <a
-            href="/admin/plugins/dues/plans"
-            className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-          >
-            plans screen
-          </a>
-          . Each grants membership of its group only while that group is marked
-          &ldquo;may be granted by plugins&rdquo; under Admin → Groups; a purchase
-          against a group that refuses shows up above as needing attention, with the
-          payment kept and the reason recorded.
+          {context.t.t('dues.admin.status.plansText')}
         </p>
         <div className="overflow-x-auto">
           <table className="w-full min-w-96 border-collapse text-sm">
             <thead>
               <tr className="border-b border-border">
-                <th className={TH}>Plan</th>
-                <th className={TH}>Price</th>
-                <th className={TH}>Billing</th>
-                <th className={TH}>Group</th>
-                <th className={TH}>Giftable</th>
+                <th className={TH}>{context.t.t('dues.admin.status.plan')}</th>
+                <th className={TH}>{context.t.t('dues.admin.status.price')}</th>
+                <th className={TH}>{context.t.t('dues.admin.status.billing')}</th>
+                <th className={TH}>{context.t.t('dues.admin.status.group')}</th>
+                <th className={TH}>{context.t.t('dues.admin.status.giftable')}</th>
               </tr>
             </thead>
             <tbody>
-              {plans.filter((plan) => !plan.archived).map((plan) => (
-                <tr key={plan.key} className="border-b border-border">
-                  <td className={TD}>
-                    {plan.name}
-                    {plan.hidden && (
-                      <span className="text-xs text-muted-foreground"> · hidden</span>
-                    )}
-                  </td>
-                  <td className={TD}>{formatMinor(plan.priceMinor, plan.currency)}</td>
-                  <td className={TD}>{describeBilling(plan)}</td>
-                  <td className={TD}>
-                    <code className="text-xs">{plan.groupKey}</code>
-                  </td>
-                  <td className={TD}>{plan.giftable ? 'yes' : 'no'}</td>
-                </tr>
-              ))}
+              {plans
+                .filter((plan) => !plan.archived)
+                .map((plan) => (
+                  <tr key={plan.key} className="border-b border-border">
+                    <td className={TD}>
+                      {plan.name}
+                      {plan.hidden && (
+                        <span className="text-xs text-muted-foreground">
+                          {' '}
+                          · {context.t.t('dues.admin.status.hidden')}
+                        </span>
+                      )}
+                    </td>
+                    <td className={TD}>
+                      {formatMinor(plan.priceMinor, plan.currency, context.locale)}
+                    </td>
+                    <td className={TD}>{describeBilling(plan)}</td>
+                    <td className={TD}>
+                      <code className="text-xs">{plan.groupKey}</code>
+                    </td>
+                    <td className={TD}>
+                      {context.t.t(
+                        plan.giftable ? 'dues.admin.status.yes' : 'dues.admin.status.no',
+                      )}
+                    </td>
+                  </tr>
+                ))}
             </tbody>
           </table>
         </div>
       </section>
 
       <section className={CARD}>
-        <h2 className="font-heading text-lg font-semibold">Latest webhook events</h2>
+        <h2 className="font-heading text-lg font-semibold">
+          {context.t.t('dues.admin.status.events')}
+        </h2>
         {events.length === 0 ? (
-          <p className="text-sm text-muted-foreground">
-            None yet. The first purchase, or Stripe&rsquo;s &ldquo;send test event&rdquo;
-            button, will put a row here — which is how you prove the endpoint works.
-          </p>
+          <p className="text-sm text-muted-foreground">{context.t.t('dues.admin.status.none')}</p>
         ) : (
           <ul className="flex flex-col divide-y divide-border text-sm">
             {events.map((event) => (
               <li key={event.id} className="flex flex-wrap justify-between gap-2 py-1.5">
                 <code className="text-xs">{event.type}</code>
                 <span className="text-xs text-muted-foreground">
-                  {fmt(event.receivedAt)} ·{' '}
+                  {fmt(event.receivedAt, context)} ·{' '}
                   {event.processedAt === null
-                    ? 'unprocessed — the reconcile task retries it'
-                    : (event.outcome ?? 'done')}
+                    ? context.t.t('dues.admin.status.unprocessed')
+                    : (event.outcome ?? context.t.t('dues.admin.status.done'))}
                 </span>
               </li>
             ))}
@@ -237,33 +247,39 @@ export async function StatusPage({
   )
 }
 
-function statusChip(membership: MembershipRow): ReactNode {
+const STATUS_KEYS = {
+  active: 'dues.admin.members.active',
+  closing: 'dues.admin.members.closing',
+  expired: 'dues.admin.members.expired',
+  grace: 'dues.admin.members.grace',
+  revoked: 'dues.admin.members.revokedStatus',
+} as const
+
+function statusChip(membership: MembershipRow, context: PluginAdminPageContext): ReactNode {
   const tone =
     membership.status === 'active'
       ? 'text-muted-foreground'
       : membership.status === 'grace' || membership.needsAttention !== null
         ? ''
         : 'text-muted-foreground'
-  return <span className={tone}>{membership.status}</span>
+  return <span className={tone}>{context.t.t(STATUS_KEYS[membership.status])}</span>
 }
 
-const MEMBER_NOTICES: Record<string, string> = {
-  extended: 'Membership extended. The member holds their group until the new date.',
-  cancelled: 'Renewal cancelled. They keep what they paid for until the period ends.',
-  revoked: 'Membership revoked. Their access is gone as of now.',
-  cleared: 'Flag cleared.',
-}
-
-const MEMBER_ERRORS: Record<string, string> = {
-  'bad-days': 'Extensions are 1 to 366 days.',
-  'not-live': 'That membership is not live any more, so there is nothing to act on.',
-  'not-cancellable': 'Only a live subscription has a renewal to cancel.',
-  unconfigured: 'Stripe is not configured, so the subscription cannot be reached.',
-  'stripe-error': 'Stripe could not be reached. Nothing changed — try again shortly.',
-  'grant-refused':
-    'The extension was recorded, but the board refused the group grant — the row is ' +
-    'flagged with the reason.',
-}
+const MEMBER_NOTICE_KEYS = new Set([
+  'dues.admin.members.cancelled',
+  'dues.admin.members.cleared',
+  'dues.admin.members.extended',
+  'dues.admin.members.revoked',
+])
+
+const MEMBER_ERROR_KEYS = new Set([
+  'dues.admin.members.badDays',
+  'dues.admin.members.grantRefused',
+  'dues.admin.members.noMembership',
+  'dues.admin.members.noRenewal',
+  'dues.admin.members.stripeError',
+  'dues.admin.members.stripeUnconfigured',
+])
 
 function isLiveRow(membership: MembershipRow): boolean {
   return (
@@ -273,7 +289,13 @@ function isLiveRow(membership: MembershipRow): boolean {
   )
 }
 
-function MemberActions({ membership }: { membership: MembershipRow }) {
+function MemberActions({
+  membership,
+  context,
+}: {
+  membership: MembershipRow
+  context: PluginAdminPageContext
+}) {
   if (!isLiveRow(membership) && membership.needsAttention === null) {
     return <span className="text-xs text-muted-foreground">—</span>
   }
@@ -293,11 +315,11 @@ function MemberActions({ membership }: { membership: MembershipRow }) {
             defaultValue={30}
             min={1}
             max={366}
-            aria-label={`Days to extend membership ${membership.id} by`}
+            aria-label={context.t.t('dues.admin.members.extendAria', { id: membership.id })}
             className={`${INPUT} w-20`}
           />
           <button type="submit" className={QUIET_BUTTON}>
-            Extend
+            {context.t.t('dues.admin.members.extend')}
           </button>
         </form>
       )}
@@ -308,7 +330,7 @@ function MemberActions({ membership }: { membership: MembershipRow }) {
           <form method="post" action="/admin/api/plugins/dues/members/cancel">
             <input type="hidden" name="membership" value={membership.id} />
             <button type="submit" className={QUIET_BUTTON}>
-              Cancel renewal
+              {context.t.t('dues.admin.members.cancel')}
             </button>
           </form>
         )}
@@ -316,7 +338,7 @@ function MemberActions({ membership }: { membership: MembershipRow }) {
         <form method="post" action="/admin/api/plugins/dues/members/revoke">
           <input type="hidden" name="membership" value={membership.id} />
           <button type="submit" className={QUIET_BUTTON}>
-            Revoke now
+            {context.t.t('dues.admin.members.revoke')}
           </button>
         </form>
       )}
@@ -324,7 +346,7 @@ function MemberActions({ membership }: { membership: MembershipRow }) {
         <form method="post" action="/admin/api/plugins/dues/attention/clear">
           <input type="hidden" name="membership" value={membership.id} />
           <button type="submit" className={QUIET_BUTTON}>
-            Clear the flag
+            {context.t.t('dues.admin.members.clear')}
           </button>
         </form>
       )}
@@ -343,35 +365,32 @@ export async function MembersPage({ context }: { context: PluginAdminPageContext
     }
   }
 
-  const good = Object.keys(MEMBER_NOTICES).find((key) => context.query[key] !== undefined)
-  const bad = MEMBER_ERRORS[context.query.error ?? '']
+  const good = `dues.admin.members.${Object.keys(context.query).find((key) =>
+    MEMBER_NOTICE_KEYS.has(`dues.admin.members.${key}`),
+  )}`
+  const bad = `dues.admin.members.${context.query.error ?? ''}`
 
   return (
     <div className="flex flex-col gap-4">
-      {good !== undefined && <GoodNotice>{MEMBER_NOTICES[good]}</GoodNotice>}
-      {bad !== undefined && <BadNotice>{bad}</BadNotice>}
+      {MEMBER_NOTICE_KEYS.has(good) && <GoodNotice>{context.t.t(good)}</GoodNotice>}
+      {MEMBER_ERROR_KEYS.has(bad) && <BadNotice>{context.t.t(bad)}</BadNotice>}
       <p className="text-sm text-muted-foreground">
-        Every membership this plugin has sold, flagged rows first. Extending is a grant,
-        not a charge; revoking removes access on the spot without touching the money —
-        refunds happen in Stripe&rsquo;s dashboard, and the refund webhook revokes on
-        its own.
+        {context.t.t('dues.admin.members.description')}
       </p>
       {memberships.length === 0 ? (
-        <p className={QUIET_PANEL}>
-          Nothing sold yet.
-        </p>
+        <p className={QUIET_PANEL}>{context.t.t('dues.admin.members.none')}</p>
       ) : (
         <div className="overflow-x-auto">
           <table className="w-full min-w-[48rem] border-collapse text-sm">
             <thead>
               <tr className="border-b border-border">
-                <th className={TH}>Member</th>
-                <th className={TH}>Plan</th>
-                <th className={TH}>Status</th>
-                <th className={TH}>Period ends</th>
-                <th className={TH}>Grace until</th>
-                <th className={TH}>Subscription</th>
-                <th className={TH}>Actions</th>
+                <th className={TH}>{context.t.t('dues.admin.members.member')}</th>
+                <th className={TH}>{context.t.t('dues.admin.members.plan')}</th>
+                <th className={TH}>{context.t.t('dues.admin.members.status')}</th>
+                <th className={TH}>{context.t.t('dues.admin.members.periodEnds')}</th>
+                <th className={TH}>{context.t.t('dues.admin.members.graceUntil')}</th>
+                <th className={TH}>{context.t.t('dues.admin.members.subscription')}</th>
+                <th className={TH}>{context.t.t('dues.admin.members.actions')}</th>
               </tr>
             </thead>
             <tbody>
@@ -380,7 +399,7 @@ export async function MembersPage({ context }: { context: PluginAdminPageContext
                   <td className={TD}>{names.get(membership.userId)}</td>
                   <td className={TD}>{membership.planKey}</td>
                   <td className={TD}>
-                    {statusChip(membership)}
+                    {statusChip(membership, context)}
                     {membership.needsAttention !== null && (
                       <p className="mt-1 rounded border border-destructive/40 bg-destructive/10 px-2 py-1 text-xs">
                         {membership.needsAttention}
@@ -389,17 +408,19 @@ export async function MembersPage({ context }: { context: PluginAdminPageContext
                   </td>
                   <td className={TD}>
                     {isLifetime(membership.currentPeriodEnd)
-                      ? 'for good'
-                      : fmt(membership.currentPeriodEnd)}
+                      ? context.t.t('dues.admin.members.forGood')
+                      : fmt(membership.currentPeriodEnd, context)}
                   </td>
                   <td className={TD}>
-                    {isLifetime(membership.currentPeriodEnd) ? '—' : fmt(membership.graceUntil)}
+                    {isLifetime(membership.currentPeriodEnd)
+                      ? '—'
+                      : fmt(membership.graceUntil, context)}
                   </td>
                   <td className={TD}>
                     <code className="text-xs">{membership.stripeSubscriptionId ?? '—'}</code>
                   </td>
                   <td className={TD}>
-                    <MemberActions membership={membership} />
+                    <MemberActions membership={membership} context={context} />
                   </td>
                 </tr>
               ))}
@@ -424,17 +445,21 @@ export async function LedgerPage({
   return (
     <div className="flex flex-col gap-4">
       <section className={CARD}>
-        <h2 className="font-heading text-lg font-semibold">By month</h2>
+        <h2 className="font-heading text-lg font-semibold">
+          {context.t.t('dues.admin.ledger.byMonth')}
+        </h2>
         {months.length === 0 ? (
-          <p className="text-sm text-muted-foreground">No money has moved yet.</p>
+          <p className="text-sm text-muted-foreground">
+            {context.t.t('dues.admin.ledger.noMoney')}
+          </p>
         ) : (
           <table className="w-full border-collapse text-sm">
             <thead>
               <tr className="border-b border-border">
-                <th className={TH}>Month</th>
-                <th className={TH}>Charges</th>
-                <th className={TH}>Gross</th>
-                <th className={TH}>Refunded</th>
+                <th className={TH}>{context.t.t('dues.admin.ledger.month')}</th>
+                <th className={TH}>{context.t.t('dues.admin.ledger.charges')}</th>
+                <th className={TH}>{context.t.t('dues.admin.ledger.gross')}</th>
+                <th className={TH}>{context.t.t('dues.admin.ledger.refunded')}</th>
               </tr>
             </thead>
             <tbody>
@@ -442,11 +467,13 @@ export async function LedgerPage({
                 <tr key={`${month.month}-${month.currency}`} className="border-b border-border">
                   <td className={TD}>{month.month}</td>
                   <td className={TD}>{month.charges}</td>
-                  <td className={TD}>{formatMinor(month.grossMinor, month.currency)}</td>
+                  <td className={TD}>
+                    {formatMinor(month.grossMinor, month.currency, context.locale)}
+                  </td>
                   <td className={TD}>
                     {month.refundedMinor === 0
                       ? '—'
-                      : formatMinor(month.refundedMinor, month.currency)}
+                      : formatMinor(month.refundedMinor, month.currency, context.locale)}
                   </td>
                 </tr>
               ))}
@@ -454,16 +481,16 @@ export async function LedgerPage({
           </table>
         )}
         <p className="text-xs text-muted-foreground">
-          Append-only, written as money moves: charges positive, refunds and chargebacks
-          negative. Stripe&rsquo;s dashboard is the authority; this is the board&rsquo;s
-          own copy in {config.currency.toUpperCase()}.
+          {context.t.t('dues.admin.ledger.appendOnly', { currency: config.currency.toUpperCase() })}
         </p>
       </section>
 
       <section className={CARD}>
-        <h2 className="font-heading text-lg font-semibold">Latest entries</h2>
+        <h2 className="font-heading text-lg font-semibold">
+          {context.t.t('dues.admin.ledger.latest')}
+        </h2>
         {entries.length === 0 ? (
-          <p className="text-sm text-muted-foreground">Empty.</p>
+          <p className="text-sm text-muted-foreground">{context.t.t('dues.admin.ledger.empty')}</p>
         ) : (
           <ul className="flex flex-col divide-y divide-border text-sm">
             {entries.map((entry) => (
@@ -475,7 +502,8 @@ export async function LedgerPage({
                   )}
                 </span>
                 <span className="text-xs text-muted-foreground">
-                  {fmt(entry.occurredAt)} · {formatMinor(entry.amountMinor, entry.currency)}
+                  {fmt(entry.occurredAt, context)} ·{' '}
+                  {formatMinor(entry.amountMinor, entry.currency, context.locale)}
                 </span>
               </li>
             ))}
@@ -486,23 +514,24 @@ export async function LedgerPage({
   )
 }
 
-const CODE_ERRORS: Record<string, string> = {
-  'bad-code': 'Codes are 3 to 32 letters, digits and hyphens. Leave the box empty to have one invented.',
-  'bad-percent': 'The discount is a whole number from 1 to 100 percent.',
-  'bad-plan': 'That plan does not exist on this board.',
-  'bad-max': 'The redemption cap is a whole number, at least 1 — or empty for no cap.',
-  'bad-expiry': 'The expiry needs to be a date in the future, like 2027-01-31.',
-  'duplicate-code': 'A code by that name already exists. Every code is unique, spelt any case.',
-  'no-such-code': 'That code could not be found.',
-}
-
-function codeState(code: CodeRow, now: Date): string {
-  if (code.disabled) return 'switched off'
-  if (code.expiresAt !== null && code.expiresAt <= now) return 'expired'
+const CODE_ERROR_KEYS = {
+  'bad-code': 'dues.admin.codes.badCode',
+  'bad-expiry': 'dues.admin.codes.badExpiry',
+  'bad-max': 'dues.admin.codes.badMax',
+  'bad-percent': 'dues.admin.codes.badPercent',
+  'bad-plan': 'dues.admin.codes.badPlan',
+  'duplicate-code': 'dues.admin.codes.duplicate',
+  'no-such-code': 'dues.admin.codes.noSuch',
+} as const
+
+function codeState(code: CodeRow, now: Date, context: PluginAdminPageContext): string {
+  if (code.disabled) return context.t.t('dues.admin.codes.switchedOff')
+  if (code.expiresAt !== null && code.expiresAt <= now)
+    return context.t.t('dues.admin.codes.expired')
   if (code.maxRedemptions !== null && code.redeemedCount >= code.maxRedemptions) {
-    return 'used up'
+    return context.t.t('dues.admin.codes.usedUp')
   }
-  return 'live'
+  return context.t.t('dues.admin.codes.live')
 }
 
 export async function CodesPage({
@@ -517,34 +546,41 @@ export async function CodesPage({
   const now = new Date()
   const created = context.query.created
   const toggled = context.query.disabled ?? context.query.enabled
-  const error = CODE_ERRORS[context.query.error ?? '']
+  const error = CODE_ERROR_KEYS[context.query.error as keyof typeof CODE_ERROR_KEYS]
+  const [createdLead, createdTail] = context.t
+    .t('dues.admin.codes.created', { code: '{code}' })
+    .split('{code}')
 
   return (
     <div className="flex flex-col gap-4">
       {created !== undefined && (
         <GoodNotice>
-          The code is live: <code className="mx-1 font-mono text-base font-semibold">{created}</code>
-          — hand it out however you like. It is shown in full below whenever you need it
-          again.
+          {createdLead}
+          <code className="mx-1 font-mono text-base font-semibold">{created}</code>
+          {createdTail}
         </GoodNotice>
       )}
       {toggled !== undefined && (
         <GoodNotice>
-          <code className="font-mono">{toggled}</code>{' '}
           {context.query.disabled !== undefined
-            ? 'is switched off. Anyone typing it now is told the code is not usable.'
-            : 'is back on.'}
+            ? context.t.t('dues.admin.codes.toggledOff', { code: toggled })
+            : context.t.t('dues.admin.codes.toggledOn', { code: toggled })}
         </GoodNotice>
       )}
-      {error !== undefined && <BadNotice>{error}</BadNotice>}
+      {error !== undefined && (
+        <BadNotice>
+          {context.t.t(
+            error,
+            context.query.error === 'too-long' ? { days: MAX_PLAN_DAYS } : undefined,
+          )}
+        </BadNotice>
+      )}
 
       <section className={CARD}>
-        <h2 className="font-heading text-lg font-semibold">Mint a code</h2>
-        <p className="text-sm text-muted-foreground">
-          A code takes a percentage off at checkout: the whole price of a pass, the first
-          payment of a subscription — renewals bill in full. A 100% code on a pass skips
-          Stripe entirely, which is how you comp somebody.
-        </p>
+        <h2 className="font-heading text-lg font-semibold">
+          {context.t.t('dues.admin.codes.mint')}
+        </h2>
+        <p className="text-sm text-muted-foreground">{context.t.t('dues.admin.codes.intro')}</p>
         <form
           method="post"
           action="/admin/api/plugins/dues/codes/create"
@@ -552,25 +588,22 @@ export async function CodesPage({
         >
           <label className="flex flex-col gap-1 text-sm">
             <span className="text-xs text-muted-foreground">
-              Code — leave empty to have one invented
+              {context.t.t('dues.admin.codes.codeHelp')}
             </span>
             <input name="code" autoComplete="off" placeholder="LAUNCH50" className={INPUT} />
           </label>
           <label className="flex flex-col gap-1 text-sm">
-            <span className="text-xs text-muted-foreground">Percent off, 1–100</span>
-            <input
-              type="number"
-              name="percent"
-              min={1}
-              max={100}
-              required
-              className={INPUT}
-            />
+            <span className="text-xs text-muted-foreground">
+              {context.t.t('dues.admin.codes.percentHelp')}
+            </span>
+            <input type="number" name="percent" min={1} max={100} required className={INPUT} />
           </label>
           <label className="flex flex-col gap-1 text-sm">
-            <span className="text-xs text-muted-foreground">Which plan it works on</span>
+            <span className="text-xs text-muted-foreground">
+              {context.t.t('dues.admin.codes.planHelp')}
+            </span>
             <select name="plan" className={INPUT}>
-              <option value="">Any plan</option>
+              <option value="">{context.t.t('dues.admin.codes.anyPlan')}</option>
               {plans.map((plan) => (
                 <option key={plan.key} value={plan.key}>
                   {plan.name}
@@ -580,40 +613,42 @@ export async function CodesPage({
           </label>
           <label className="flex flex-col gap-1 text-sm">
             <span className="text-xs text-muted-foreground">
-              Redemption cap — empty for unlimited
+              {context.t.t('dues.admin.codes.redemptionCap')}
             </span>
             <input type="number" name="max" min={1} className={INPUT} />
           </label>
           <label className="flex flex-col gap-1 text-sm">
             <span className="text-xs text-muted-foreground">
-              Expires at end of day (UTC) — empty for never
+              {context.t.t('dues.admin.codes.expiresHelp')}
             </span>
             <input type="date" name="expires" className={INPUT} />
           </label>
           <div className="flex items-end">
             <button type="submit" className={ACT_BUTTON}>
-              Mint the code
+              {context.t.t('dues.admin.codes.mintButton')}
             </button>
           </div>
         </form>
       </section>
 
       <section className={CARD}>
-        <h2 className="font-heading text-lg font-semibold">Every code</h2>
+        <h2 className="font-heading text-lg font-semibold">
+          {context.t.t('dues.admin.codes.every')}
+        </h2>
         {codes.length === 0 ? (
-          <p className="text-sm text-muted-foreground">None yet.</p>
+          <p className="text-sm text-muted-foreground">{context.t.t('dues.admin.codes.empty')}</p>
         ) : (
           <div className="overflow-x-auto">
             <table className="w-full min-w-[40rem] border-collapse text-sm">
               <thead>
                 <tr className="border-b border-border">
-                  <th className={TH}>Code</th>
-                  <th className={TH}>Off</th>
-                  <th className={TH}>Plan</th>
-                  <th className={TH}>Redeemed</th>
-                  <th className={TH}>Expires</th>
-                  <th className={TH}>State</th>
-                  <th className={TH}>Actions</th>
+                  <th className={TH}>{context.t.t('dues.admin.codes.code')}</th>
+                  <th className={TH}>{context.t.t('dues.admin.codes.off')}</th>
+                  <th className={TH}>{context.t.t('dues.admin.codes.plan')}</th>
+                  <th className={TH}>{context.t.t('dues.admin.codes.redeemed')}</th>
+                  <th className={TH}>{context.t.t('dues.admin.codes.expires')}</th>
+                  <th className={TH}>{context.t.t('dues.admin.codes.state')}</th>
+                  <th className={TH}>{context.t.t('dues.admin.codes.actions')}</th>
                 </tr>
               </thead>
               <tbody>
@@ -623,25 +658,27 @@ export async function CodesPage({
                       <code className="font-mono">{code.code}</code>
                     </td>
                     <td className={TD}>{code.percentOff}%</td>
-                    <td className={TD}>{code.planKey ?? 'any'}</td>
+                    <td className={TD}>{code.planKey ?? context.t.t('dues.admin.codes.any')}</td>
                     <td className={TD}>
                       {code.redeemedCount}
-                      {code.maxRedemptions !== null && ` of ${code.maxRedemptions}`}
+                      {code.maxRedemptions !== null && ` / ${code.maxRedemptions}`}
                     </td>
                     <td className={TD}>
-                      {code.expiresAt === null ? 'never' : fmt(code.expiresAt)}
+                      {code.expiresAt === null
+                        ? context.t.t('dues.admin.codes.never')
+                        : fmt(code.expiresAt, context)}
                     </td>
-                    <td className={TD}>{codeState(code, now)}</td>
+                    <td className={TD}>{codeState(code, now, context)}</td>
                     <td className={TD}>
                       <form method="post" action="/admin/api/plugins/dues/codes/disable">
                         <input type="hidden" name="code" value={code.id} />
-                        <input
-                          type="hidden"
-                          name="disabled"
-                          value={code.disabled ? '0' : '1'}
-                        />
+                        <input type="hidden" name="disabled" value={code.disabled ? '0' : '1'} />
                         <button type="submit" className={QUIET_BUTTON}>
-                          {code.disabled ? 'Switch on' : 'Switch off'}
+                          {context.t.t(
+                            code.disabled
+                              ? 'dues.admin.codes.switchOn'
+                              : 'dues.admin.codes.switchOff',
+                          )}
                         </button>
                       </form>
                     </td>
@@ -652,44 +689,37 @@ export async function CodesPage({
           </div>
         )}
         <p className="text-xs text-muted-foreground">
-          Redemptions count when a payment settles, not when a checkout starts. A code is
-          never deleted — switching it off keeps the history of what it sold.
+          {context.t.t('dues.admin.codes.redemptions')}
         </p>
       </section>
     </div>
   )
 }
 
-const PLAN_ERRORS: Record<string, string> = {
-  'bad-key': 'Plan keys are lower-case letters, digits and hyphens, like day-pass.',
-  'bad-name': 'The plan needs a name members will read.',
-  'bad-group': 'That is not a valid group key.',
-  'bad-price': 'The price is a positive whole number of minor units — 500 is £5.00.',
-  'bad-currency': 'The currency is a three-letter ISO code, like gbp, usd or eur.',
-  'bad-mode': 'Pick how the plan bills.',
-  'bad-length': 'The length is a whole number of days, weeks, months or years — at least 1.',
-  'too-long': `A pass plus its grace window cannot reach past two years (${MAX_PLAN_DAYS} days) — that is the board's cap on a plugin grant. Sell lifetime instead.`,
-  'bad-interval': 'A subscription bills every month or every year.',
-  'auto-gift': 'A subscription cannot be giftable — it would bill the buyer forever.',
-  'duplicate-plan': 'A plan with that key already exists. Keys are forever; pick another.',
-  'no-such-plan': 'That plan could not be found.',
-  'bad-stripe-price': 'A pasted Stripe price id starts with price_.',
-  unconfigured:
-    'Stripe is not configured, so a subscription price cannot be minted. Set the secret ' +
-    'key first, or paste a price id made in the Stripe dashboard.',
-  'stripe-error': 'Stripe could not be reached. Nothing was saved — try again shortly.',
-}
-
-const PLAN_NOTICES: Record<string, (key: string) => string> = {
-  created: (key) => `The plan ${key} is on sale from this moment.`,
-  updated: (key) =>
-    `${key} is updated. Existing memberships and running subscriptions keep what they ` +
-    'bought; the change is for the next buyer.',
-  archived: (key) =>
-    `${key} is off sale. Everyone who holds it keeps it — archiving stops new purchases, ` +
-    'nothing else.',
-  restored: (key) => `${key} is back on sale.`,
-}
+const PLAN_ERROR_KEYS = {
+  'auto-gift': 'dues.admin.plans.autoGift',
+  'bad-currency': 'dues.admin.plans.badCurrency',
+  'bad-group': 'dues.admin.plans.badGroup',
+  'bad-interval': 'dues.admin.plans.badInterval',
+  'bad-key': 'dues.admin.plans.badKey',
+  'bad-length': 'dues.admin.plans.badLength',
+  'bad-mode': 'dues.admin.plans.badMode',
+  'bad-name': 'dues.admin.plans.badName',
+  'bad-price': 'dues.admin.plans.badPrice',
+  'bad-stripe-price': 'dues.admin.plans.badStripePrice',
+  'duplicate-plan': 'dues.admin.plans.duplicate',
+  'no-such-plan': 'dues.admin.plans.noSuch',
+  'stripe-error': 'dues.admin.plans.stripeError',
+  'too-long': 'dues.admin.plans.tooLong',
+  unconfigured: 'dues.admin.plans.stripeUnconfigured',
+} as const
+
+const PLAN_NOTICE_KEYS = {
+  archived: 'dues.admin.plans.archived',
+  created: 'dues.admin.plans.created',
+  restored: 'dues.admin.plans.restored',
+  updated: 'dues.admin.plans.updated',
+} as const
 
 function planPeriodParts(plan: PlanRow): { length: number; unit: string } {
   const match = /^P(\d+)([YMWD])$/.exec(plan.periodSpec ?? '')
@@ -699,28 +729,32 @@ function planPeriodParts(plan: PlanRow): { length: number; unit: string } {
   return { length: Number(match[1]), unit }
 }
 
-function PlanFields({ plan }: { plan?: PlanRow }) {
+function PlanFields({ plan, context }: { plan?: PlanRow; context: PluginAdminPageContext }) {
   const period = plan === undefined ? { length: 90, unit: 'days' } : planPeriodParts(plan)
   return (
     <>
       <label className="flex flex-col gap-1 text-sm">
-        <span className="text-xs text-muted-foreground">Name</span>
+        <span className="text-xs text-muted-foreground">
+          {context.t.t('dues.admin.plans.name')}
+        </span>
         <input name="name" defaultValue={plan?.name ?? ''} required className={INPUT} />
       </label>
       <label className="flex flex-col gap-1 text-sm">
-        <span className="text-xs text-muted-foreground">Description — optional</span>
+        <span className="text-xs text-muted-foreground">
+          {context.t.t('dues.admin.plans.description')}
+        </span>
         <input name="description" defaultValue={plan?.description ?? ''} className={INPUT} />
       </label>
       <label className="flex flex-col gap-1 text-sm">
         <span className="text-xs text-muted-foreground">
-          Group it grants (marked plugin-grantable under Admin → Groups)
+          {context.t.t('dues.admin.plans.giftGroup')}
         </span>
         <input name="group" defaultValue={plan?.groupKey ?? ''} required className={INPUT} />
       </label>
       <div className="grid grid-cols-2 gap-3">
         <label className="flex flex-col gap-1 text-sm">
           <span className="text-xs text-muted-foreground">
-            Price in minor units — 500 is £5.00
+            {context.t.t('dues.admin.plans.price')}
           </span>
           <input
             type="number"
@@ -732,7 +766,9 @@ function PlanFields({ plan }: { plan?: PlanRow }) {
           />
         </label>
         <label className="flex flex-col gap-1 text-sm">
-          <span className="text-xs text-muted-foreground">Currency</span>
+          <span className="text-xs text-muted-foreground">
+            {context.t.t('dues.admin.plans.currency')}
+          </span>
           <input
             name="currency"
             defaultValue={plan?.currency ?? ''}
@@ -746,7 +782,9 @@ function PlanFields({ plan }: { plan?: PlanRow }) {
       {(plan === undefined || plan.mode === 'fixed') && (
         <div className="grid grid-cols-2 gap-3">
           <label className="flex flex-col gap-1 text-sm">
-            <span className="text-xs text-muted-foreground">Pass length</span>
+            <span className="text-xs text-muted-foreground">
+              {context.t.t('dues.admin.plans.length')}
+            </span>
             <input
               type="number"
               name="length"
@@ -756,36 +794,35 @@ function PlanFields({ plan }: { plan?: PlanRow }) {
             />
           </label>
           <label className="flex flex-col gap-1 text-sm">
-            <span className="text-xs text-muted-foreground">…counted in</span>
+            <span className="text-xs text-muted-foreground">
+              {context.t.t('dues.admin.plans.unit')}
+            </span>
             <select name="unit" defaultValue={period.unit} className={INPUT}>
-              <option value="days">days</option>
-              <option value="weeks">weeks</option>
-              <option value="months">months</option>
-              <option value="years">years</option>
+              <option value="days">{context.t.t('dues.admin.plans.days')}</option>
+              <option value="weeks">{context.t.t('dues.admin.plans.weeks')}</option>
+              <option value="months">{context.t.t('dues.admin.plans.months')}</option>
+              <option value="years">{context.t.t('dues.admin.plans.years')}</option>
             </select>
           </label>
         </div>
       )}
       {(plan === undefined || plan.mode === 'auto') && (
         <label className="flex flex-col gap-1 text-sm">
-          <span className="text-xs text-muted-foreground">Subscription bills every</span>
+          <span className="text-xs text-muted-foreground">
+            {context.t.t('dues.admin.plans.interval')}
+          </span>
           <select name="interval" defaultValue={plan?.billingInterval ?? 'month'} className={INPUT}>
-            <option value="month">month</option>
-            <option value="year">year</option>
+            <option value="month">{context.t.t('dues.admin.plans.month')}</option>
+            <option value="year">{context.t.t('dues.admin.plans.year')}</option>
           </select>
         </label>
       )}
       {(plan === undefined || plan.mode === 'auto') && (
         <label className="flex flex-col gap-1 text-sm">
           <span className="text-xs text-muted-foreground">
-            Stripe price id — leave empty and one is minted to match
+            {context.t.t('dues.admin.plans.stripePrice')}
           </span>
-          <input
-            name="stripe_price"
-            placeholder="price_…"
-            autoComplete="off"
-            className={INPUT}
-          />
+          <input name="stripe_price" placeholder="price_…" autoComplete="off" className={INPUT} />
         </label>
       )}
       <div className="flex flex-wrap gap-4 text-sm">
@@ -795,11 +832,11 @@ function PlanFields({ plan }: { plan?: PlanRow }) {
             name="giftable"
             defaultChecked={plan === undefined ? true : plan.giftable}
           />
-          Can be bought for another member
+          {context.t.t('dues.admin.plans.canGift')}
         </label>
         <label className="flex items-center gap-2">
           <input type="checkbox" name="hidden" defaultChecked={plan?.hidden ?? false} />
-          Hidden from the shop
+          {context.t.t('dues.admin.plans.hidden')}
         </label>
       </div>
     </>
@@ -814,26 +851,27 @@ export async function PlansAdminPage({
   context: PluginAdminPageContext
 }) {
   const plans = await loadPlans(context.data, config)
-  const notice = Object.keys(PLAN_NOTICES).find((key) => context.query[key] !== undefined)
-  const error = PLAN_ERRORS[context.query.error ?? '']
+  const notice = Object.keys(PLAN_NOTICE_KEYS).find((key) => context.query[key] !== undefined)
+  const error = PLAN_ERROR_KEYS[context.query.error as keyof typeof PLAN_ERROR_KEYS]
 
   return (
     <div className="flex flex-col gap-4">
       {notice !== undefined && (
-        <GoodNotice>{PLAN_NOTICES[notice]!(context.query[notice]!)}</GoodNotice>
+        <GoodNotice>
+          {context.t.t(PLAN_NOTICE_KEYS[notice as keyof typeof PLAN_NOTICE_KEYS], {
+            key: context.query[notice],
+          })}
+        </GoodNotice>
       )}
       {error !== undefined && <BadNotice>{error}</BadNotice>}
 
-      <p className="text-sm text-muted-foreground">
-        Every purchase snapshots its plan — the name, the price, the currency, the length
-        — so editing here never rewrites what anyone already bought. A subscription price
-        change mints a new Stripe price: running subscriptions keep billing what they
-        signed up for, and only the next buyer sees the new number.
-      </p>
+      <p className="text-sm text-muted-foreground">{context.t.t('dues.admin.plans.editing')}</p>
 
       {plans.length > 0 && (
         <section className={CARD}>
-          <h2 className="font-heading text-lg font-semibold">The plans</h2>
+          <h2 className="font-heading text-lg font-semibold">
+            {context.t.t('dues.admin.plans.thePlans')}
+          </h2>
           <ul className="flex flex-col divide-y divide-border">
             {plans.map((plan) => (
               <li key={plan.id} className="flex flex-col gap-3 py-4">
@@ -843,20 +881,23 @@ export async function PlansAdminPage({
                     {plan.name}
                   </span>
                   <span className="text-sm text-muted-foreground">
-                    {formatMinor(plan.priceMinor, plan.currency)} · {describeBilling(plan)}
-                    {plan.hidden && ' · hidden'}
-                    {plan.archived && ' · off sale'}
+                    {formatMinor(plan.priceMinor, plan.currency, context.locale)} ·{' '}
+                    {describeBilling(plan)}
+                    {plan.hidden && ` · ${context.t.t('dues.admin.plans.hidden')}`}
+                    {plan.archived && ` · ${context.t.t('dues.admin.plans.offSale')}`}
                   </span>
                 </div>
                 {plan.mode === 'auto' && (
                   <p className="text-xs text-muted-foreground">
-                    Billing against <code>{plan.stripePriceId ?? 'no price yet — not buyable'}</code>
+                    {context.t.t('dues.admin.plans.billing', {
+                      price: plan.stripePriceId ?? context.t.t('dues.admin.plans.missingPrice'),
+                    })}
                   </p>
                 )}
                 {!plan.archived && (
                   <details>
                     <summary className="cursor-pointer text-sm text-muted-foreground">
-                      Edit this plan
+                      {context.t.t('dues.admin.plans.edit')}
                     </summary>
                     <form
                       method="post"
@@ -864,10 +905,10 @@ export async function PlansAdminPage({
                       className="mt-3 flex flex-col gap-3"
                     >
                       <input type="hidden" name="id" value={plan.id} />
-                      <PlanFields plan={plan} />
+                      <PlanFields plan={plan} context={context} />
                       <div>
                         <button type="submit" className={ACT_BUTTON}>
-                          Save the plan
+                          {context.t.t('dues.admin.plans.save')}
                         </button>
                       </div>
                     </form>
@@ -877,7 +918,9 @@ export async function PlansAdminPage({
                   <input type="hidden" name="id" value={plan.id} />
                   <input type="hidden" name="archived" value={plan.archived ? '0' : '1'} />
                   <button type="submit" className={QUIET_BUTTON}>
-                    {plan.archived ? 'Put it back on sale' : 'Take it off sale'}
+                    {context.t.t(
+                      plan.archived ? 'dues.admin.plans.putBack' : 'dues.admin.plans.takeOffSale',
+                    )}
                   </button>
                 </form>
               </li>
@@ -887,13 +930,10 @@ export async function PlansAdminPage({
       )}
 
       <section className={CARD}>
-        <h2 className="font-heading text-lg font-semibold">Add a plan</h2>
-        <p className="text-sm text-muted-foreground">
-          A <strong>pass</strong> is one payment for a fixed stretch — a day to two
-          years. A <strong>subscription</strong> renews by itself until cancelled.{' '}
-          <strong>Lifetime</strong> is one payment, forever. The key is the plan&rsquo;s
-          permanent name in records and cannot be changed later; everything else can.
-        </p>
+        <h2 className="font-heading text-lg font-semibold">
+          {context.t.t('dues.admin.plans.add')}
+        </h2>
+        <p className="text-sm text-muted-foreground">{context.t.t('dues.admin.plans.addIntro')}</p>
         <form
           method="post"
           action="/admin/api/plugins/dues/plans/create"
@@ -901,29 +941,30 @@ export async function PlansAdminPage({
         >
           <div className="grid grid-cols-2 gap-3">
             <label className="flex flex-col gap-1 text-sm">
-              <span className="text-xs text-muted-foreground">Key — permanent</span>
+              <span className="text-xs text-muted-foreground">
+                {context.t.t('dues.admin.plans.key')}
+              </span>
               <input name="key" placeholder="day-pass" required className={INPUT} />
             </label>
             <label className="flex flex-col gap-1 text-sm">
-              <span className="text-xs text-muted-foreground">How it bills</span>
+              <span className="text-xs text-muted-foreground">
+                {context.t.t('dues.admin.plans.bills')}
+              </span>
               <select name="mode" className={INPUT}>
-                <option value="fixed">a pass — one payment, fixed length</option>
-                <option value="auto">a subscription — renews itself</option>
-                <option value="lifetime">lifetime — one payment, forever</option>
+                <option value="fixed">{context.t.t('dues.admin.plans.fixed')}</option>
+                <option value="auto">{context.t.t('dues.admin.plans.subscription')}</option>
+                <option value="lifetime">{context.t.t('dues.admin.plans.lifetime')}</option>
               </select>
             </label>
           </div>
-          <PlanFields />
+          <PlanFields context={context} />
           <div>
             <button type="submit" className={ACT_BUTTON}>
-              Put it on sale
+              {context.t.t('dues.admin.plans.onSale')}
             </button>
           </div>
         </form>
-        <p className="text-xs text-muted-foreground">
-          Pass length and billing interval apply to the mode that uses them; the others
-          ignore them. A subscription needs Stripe configured, or a pasted price id.
-        </p>
+        <p className="text-xs text-muted-foreground">{context.t.t('dues.admin.plans.footer')}</p>
       </section>
     </div>
   )