feat: Updated plans and catalogue pages

adminsite/app/(customer)/purchase/PurchaseForm.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { useMutation, useQuery } from "@tanstack/react-query";
+import { rowsForPlan, sharedRows } from "@/lib/catalogue";
 import { ApiError, api, lineItemsFor, type CatalogueRow, type CheckoutOptions, type Deployment, type Plan, type Term, type Tier } from "@/lib/api";
 import { initPaddle, previewPrices, type PricePreview } from "@/lib/paddle";
 import { featureDesc, featureLabel } from "@/lib/features";
@@ -60,24 +61,24 @@ export function PurchaseForm() {
     const options = optionsQ.data;
     const accountId = account.data?.account.account_id ?? "";
 
-    // Distinct feature keys offered on this deployment, in a stable order.
+    // Every feature a paid plan can be sold, in a stable order. Features are
+    // shared rows now, so they no longer differ by deployment — the list is the
+    // same on both, and reads from one place rather than four.
     const featureKeys = useMemo(() => {
         if (!options) return [] as string[];
         const keys = new Set<string>();
-        for (const r of options.catalogue) {
-            if (r.deployment === dep && r.kind === "feature" && r.feature_key) {
-                keys.add(r.feature_key);
-            }
+        for (const r of sharedRows(options.catalogue)) {
+            if (r.kind === "feature" && r.feature_key) keys.add(r.feature_key);
         }
         return [...keys];
-    }, [options, dep]);
+    }, [options]);
 
     const activePlans = useMemo(() => (options?.plans ?? []).filter((p) => p.deployment === dep && p.active).sort((a, b) => TIER_ORDER.indexOf(a.tier) - TIER_ORDER.indexOf(b.tier)), [options, dep]);
     const plan = activePlans.find((p) => p.tier === choice.tier);
     const baseServers = plan?.base_limits.max_servers ?? 0;
     const unlimited = baseServers === -1;
 
-    const rows = useMemo(() => (options?.catalogue ?? []).filter((r) => r.deployment === dep && r.tier === choice.tier), [options, dep, choice.tier]);
+    const rows = useMemo(() => rowsForPlan(options?.catalogue ?? [], dep, choice.tier), [options, dep, choice.tier]);
 
     // Real line items for the current configuration the same builder the
     // checkout uses, so the summary can never disagree with the overlay.
@@ -239,7 +240,7 @@ export function PurchaseForm() {
                                 headline={p.tier === "free" ? "£0" : basePrices[p.tier]}
                                 cycleLabel={cycleShort(dep, choice.term)}
                                 featureKeys={featureKeys}
-                                catalogue={options.catalogue.filter((r) => r.deployment === dep && r.tier === p.tier)}
+                                catalogue={rowsForPlan(options.catalogue, dep, p.tier)}
                                 env={options.env}
                                 term={choice.term}
                                 onSelect={() =>
@@ -252,7 +253,7 @@ export function PurchaseForm() {
                                         features: c.features.filter((k) => {
                                             const st = featureStateFor(
                                                 p,
-                                                options.catalogue.filter((r) => r.deployment === dep && r.tier === p.tier),
+                                                rowsForPlan(options.catalogue, dep, p.tier),
                                                 options.env,
                                                 c.term,
                                                 k,
@@ -658,7 +659,7 @@ function Receipt({
     // Label each real line item from the catalogue, and price it from Paddle.
     const base = plan?.base_limits.max_servers ?? 0;
     const extra = base === -1 ? 0 : Math.max(0, choice.servers - base);
-    const rows = options.catalogue.filter((r) => r.deployment === dep && r.tier === choice.tier);
+    const rows = rowsForPlan(options.catalogue, dep, choice.tier);
     const idFor = (predicate: (r: CatalogueRow) => boolean) => {
         const row = rows.find(predicate);
         return row?.price_ids?.[options.env]?.[choice.term] ?? "";