create-ailk 0.22.0 → 0.24.0

package/templates/apps/web/app/[locale]/pricing/page.tsx

@@ -1,21 +1,324 @@
 // Pricing page. Reads the Pricing MDX frontmatter, renders sections via
 // SectionRenderer, and emits a JSON-LD <script>.
-import type {
-  getMdxSource as defaultGetMdxSource,
-  getPageSections as defaultGetPageSections} from "@working-theory/page-renderer";
+//
+// `?plan=<key>` (#8842) — a diagnostic's recommended plan. The key is handed
+// to every `pricing` section as `recommended`; the section moves its authored
+// recommendation onto the matching plan and scrolls it into view. Reading the
+// query renders this page per request: the recommendation is in the served
+// HTML, so the card never flashes from the authored plan to the named one.
+//
+// The Offerings shown set (#8927, spec
+// docs/specs/8927-pricing-renders-the-shown-set-spec.md). Before rendering,
+// the page reads `GET /v1/content/shown-offerings` through the api-client,
+// shared per server instance for READ_TTL_MS, and renders one of three pages:
+//   - unconnected (or production with no API origin) — today's MDX page,
+//     exactly as above (D7);
+//   - a current shown set — the workspace's Stripe cards in place of the
+//     page's authored `pricing` sections, `?plan=` moving the recommendation
+//     only for a `{plan}`-grammar value (D4, contract §3.7);
+//   - anything else (expired, empty, a failed read) — the site's contact
+//     email in place of those sections, never an error (D5).
+// Stripe text reaches markup only as React text and JSON-LD only through
+// renderPage's serializer (T4); the metadata stays the MDX page's (T8).
+import { offerings } from "@working-theory/api-client";
 import {
+  getPageSections as defaultGetPageSections,
   renderPage,
-  renderPageMetadata
+  renderPageMetadata,
 } from "@working-theory/page-renderer";
+import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
+import { ContactFallback } from "@working-theory/ui";
+import {
+  LOOKUP_KEY_PLAN_PATTERN,
+  type PageSection,
+} from "@working-theory/validation";
 import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
 import type { ReactElement } from "react";
 
+import {
+  offeringsPricing,
+  type OfferingsPricing,
+  type OfferingsPricingLabels,
+} from "../../../lib/offerings-pricing";
+import { contactFormText } from "../contact/contact-form-text";
+import { readSiteContactEmail } from "../contact/site-contact-email";
+
+// #8927 D2 — never prerendered; the Offerings read behind it is shared for READ_TTL_MS.
+export const dynamic = "force-dynamic";
+
 interface Props {
   params: Promise<{ locale: string }>;
+  searchParams?: Promise<Record<string, string | string[] | undefined>>;
   getMdxSource?: typeof defaultGetMdxSource;
   getPageSections?: typeof defaultGetPageSections;
 }
 
+type PricingSection = Extract<PageSection, { type: "pricing" }>;
+type PricingData = PricingSection["data"];
+
+/**
+ * Every `pricing` section with `recommended` set to `plan` (#8842). Each
+ * section matches the key against its own plans, so a second plan group
+ * keeps its own default unless it carries the same key.
+ */
+function withRecommendedPlan(
+  sections: PageSection[],
+  plan: string,
+): PageSection[] {
+  return sections.map((section) =>
+    section.type === "pricing"
+      ? {
+          ...section,
+          // `recommended` is a render-time field the section reads, not an
+          // authored one, so it is not in the validated section schema.
+          data: { ...section.data, recommended: plan } as typeof section.data,
+        }
+      : section,
+  );
+}
+
+type OfferingsRead =
+  | { kind: "unconnected" }
+  | { kind: "shown"; shownSet: unknown }
+  | { kind: "contact" };
+
+const CONTACT: OfferingsRead = { kind: "contact" };
+
+/**
+ * How long the Offerings read is shared across requests (D2): a view carries
+ * no visitor headers, so every view would otherwise count against this
+ * server's one per-IP limit at the API. A product switched off disappears
+ * within it. The contact page's window (#8731).
+ */
+const READ_TTL_MS = 15_000;
+
+const reads = new Map<string, { at: number; read: Promise<OfferingsRead> }>();
+
+/**
+ * `read()`'s result, shared per instance for READ_TTL_MS. Concurrent calls
+ * share one in-flight read, and a failed read is shared the same way, so a
+ * burst against an unreachable API is one call.
+ */
+function sharedRead(
+  key: string,
+  read: () => Promise<OfferingsRead>,
+): Promise<OfferingsRead> {
+  const now = Date.now();
+  const hit = reads.get(key);
+  if (hit && now - hit.at < READ_TTL_MS) return hit.read;
+  const fresh = read();
+  reads.set(key, { at: now, read: fresh });
+  return fresh;
+}
+
+/**
+ * Whether an API origin is configured: the three names `getApiBase()` in
+ * packages/api-client/src/http.ts reads, in step with it. Without one that
+ * function answers `localhost:3001`.
+ */
+function apiOriginConfigured(): boolean {
+  return Boolean(
+    process.env.AILK_API_URL ||
+    process.env.NEXT_PUBLIC_AILK_API_URL ||
+    process.env.NEXT_PUBLIC_API_URL,
+  );
+}
+
+/**
+ * The shown-offerings read (D2). A production deployment with no API has no
+ * connection to read, so it is unconnected without a call. The body is
+ * untrusted: anything but `unconnected` or `shown` — `empty`, an unknown
+ * status, a non-object body, a non-2xx, a throw — is the contact email.
+ */
+function readShownOfferings(): Promise<OfferingsRead> {
+  if (process.env.NODE_ENV === "production" && !apiOriginConfigured()) {
+    return Promise.resolve({ kind: "unconnected" });
+  }
+  return sharedRead("shown-offerings", async () => {
+    try {
+      const res = await offerings.shown();
+      if (!res.ok) return CONTACT;
+      const body: unknown = res.body;
+      if (body === null || typeof body !== "object") return CONTACT;
+      const { status, shownSet } = body as {
+        status?: unknown;
+        shownSet?: unknown;
+      };
+      if (status === "unconnected") return { kind: "unconnected" };
+      if (status === "shown") return { kind: "shown", shownSet };
+      return CONTACT;
+    } catch {
+      return CONTACT;
+    }
+  });
+}
+
+/** Keeps the `{amount}` placeholder for `period` to fill (D6). */
+const KEEP_AMOUNT_PLACEHOLDER = { amount: "{amount}" };
+
+/** The mapper's labels and the plans section's recommendation label (D6). */
+async function offeringsCopy(locale: string): Promise<{
+  labels: OfferingsPricingLabels;
+  recommendedLabel: string;
+  addonsHeadline: string;
+}> {
+  const t = await getTranslations({ locale, namespace: "pricingOfferings" });
+  const period = (key: "monthly" | "annual" | "oneTime") => {
+    const phrase = t(key, KEEP_AMOUNT_PLACEHOLDER);
+    return (amount: string) => phrase.replace("{amount}", () => amount);
+  };
+  return {
+    labels: {
+      cta: t("cta"),
+      recommended: t("recommended"),
+      monthly: period("monthly"),
+      annual: period("annual"),
+      oneTime: period("oneTime"),
+    },
+    recommendedLabel: t("recommendedForYou"),
+    addonsHeadline: t("addonsHeadline"),
+  };
+}
+
+/** The authored section copy a Stripe section keeps — never a plan or price fact. */
+const AUTHORED_COPY_FIELDS = [
+  "eyebrow",
+  "headline",
+  "description",
+  "header",
+  "headlineSize",
+  "toggleStyle",
+  "featureListStyle",
+  "gapAbove",
+  "separation",
+  "gap",
+  "surface",
+  "note",
+  "collapseFeaturesOnMobile",
+] as const satisfies readonly (keyof PricingData)[];
+
+function authoredCopy(
+  section: PricingSection | undefined,
+  extra: readonly (keyof PricingData)[] = [],
+): Partial<PricingData> {
+  const copy: Partial<Record<keyof PricingData, unknown>> = {};
+  if (!section) return copy as Partial<PricingData>;
+  for (const field of [...AUTHORED_COPY_FIELDS, ...extra]) {
+    if (section.data[field] !== undefined) copy[field] = section.data[field];
+  }
+  return copy as Partial<PricingData>;
+}
+
+function isPricing(section: PageSection): section is PricingSection {
+  return section.type === "pricing";
+}
+
+/** Where a section with no slot goes: after a leading hero, else first. */
+function insertionIndex(sections: PageSection[]): number {
+  return sections[0]?.type === "hero" ? 1 : 0;
+}
+
+/**
+ * The page's sections with the Stripe fragments in place of its authored
+ * `pricing` sections (D4). The first non-`addons` pricing section is the
+ * plans slot and the first `addons` one the add-ons slot; every other pricing
+ * section, and a slot whose fragment is `null`, is removed. A fragment with no
+ * slot is inserted after a leading hero (the add-ons directly after the
+ * plans). No other section moves.
+ */
+function withOfferings(
+  sections: PageSection[],
+  pricing: OfferingsPricing,
+  plan: string | undefined,
+  recommendedLabel: string,
+  addonsHeadline: string,
+): PageSection[] {
+  const plansSlot = sections.find(
+    (s): s is PricingSection => isPricing(s) && s.data.variant !== "addons",
+  );
+  const addonsSlot = sections.find(
+    (s): s is PricingSection => isPricing(s) && s.data.variant === "addons",
+  );
+  const recommend =
+    plan !== undefined && LOOKUP_KEY_PLAN_PATTERN.test(plan) ? plan : undefined;
+  const plansSection: PricingSection | null = pricing.plans && {
+    id: plansSlot?.id ?? "offerings-plans",
+    type: "pricing",
+    data: {
+      ...authoredCopy(plansSlot),
+      ...pricing.plans,
+      // A `?plan=` recommendation moves the mapper's highlight onto the named
+      // plan and wears `recommendedLabel` (#8842); the mapper's own
+      // "Recommended" pill label would ride along as a second label, so it is
+      // dropped from every card when a recommendation is in play.
+      ...(recommend !== undefined &&
+      pricing.plans.plans.some(
+        (card) => card.key?.toLowerCase() === recommend.toLowerCase(),
+      )
+        ? {
+            plans: pricing.plans.plans.map(({ highlightLabel: _, ...card }) => card),
+          }
+        : {}),
+      // Render-time fields the section reads (#8842), not authored ones.
+      recommendedLabel,
+      ...(recommend !== undefined ? { recommended: recommend } : {}),
+    } as PricingData,
+  };
+  const addonsSection: PricingSection | null = pricing.addons && {
+    id: addonsSlot?.id ?? "offerings-addons",
+    type: "pricing",
+    data: {
+      // An inserted add-ons section (no authored slot) sits tight under the
+      // plans and carries its own headline, so a lone tile is never an
+      // unlabeled band (design review B2).
+      ...(addonsSlot ? {} : { headline: addonsHeadline, gapAbove: "tight" }),
+      ...authoredCopy(addonsSlot, ["addonLayout"]),
+      ...pricing.addons,
+    } as PricingData,
+  };
+
+  const placed: PageSection[] = [];
+  for (const section of sections) {
+    if (!isPricing(section)) placed.push(section);
+    else if (section === plansSlot && plansSection) placed.push(plansSection);
+    else if (section === addonsSlot && addonsSection)
+      placed.push(addonsSection);
+  }
+  if (plansSection && !plansSlot) {
+    placed.splice(insertionIndex(placed), 0, plansSection);
+  }
+  if (addonsSection && !addonsSlot) {
+    const plansAt = plansSection ? placed.indexOf(plansSection) : -1;
+    placed.splice(
+      plansAt >= 0 ? plansAt + 1 : insertionIndex(placed),
+      0,
+      addonsSection,
+    );
+  }
+  return placed;
+}
+
+/** The section the contact email is slotted into (D5). */
+const CONTACT_SECTION_ID = "offerings-contact";
+
+/**
+ * The page's sections with every `pricing` section removed and one
+ * `contact-form` section in the first one's place, else after a leading hero
+ * (D5). It contributes no JSON-LD, so the page publishes no `Offer`.
+ */
+function withContactFallback(sections: PageSection[]): PageSection[] {
+  const first = sections.findIndex(isPricing);
+  const kept: PageSection[] = sections.filter((s) => !isPricing(s));
+  const contact = {
+    id: CONTACT_SECTION_ID,
+    type: "contact-form",
+    data: { fields: [] },
+  } as PageSection;
+  kept.splice(first >= 0 ? first : insertionIndex(kept), 0, contact);
+  return kept;
+}
+
 export async function generateMetadata({
   params,
 }: Pick<Props, "params">): Promise<Metadata> {
@@ -25,16 +328,74 @@ export async function generateMetadata({
 
 export default async function Page({
   params,
+  searchParams,
   getMdxSource,
-  getPageSections,
+  getPageSections = defaultGetPageSections,
 }: Props): Promise<ReactElement> {
   const { locale } = await params;
+  const search = (await searchParams) ?? {};
+  const plan = Array.isArray(search.plan) ? search.plan[0] : search.plan;
+  const read = await readShownOfferings();
+
+  if (read.kind === "unconnected") {
+    return renderPage({
+      type: "Pricing",
+      slug: "pricing",
+      locale,
+      translationsNamespace: "pricing",
+      ...(getMdxSource !== undefined && { getMdxSource }),
+      getPageSections: plan
+        ? async (frontmatter) =>
+            withRecommendedPlan(await getPageSections(frontmatter), plan)
+        : getPageSections,
+    });
+  }
+
+  if (read.kind === "shown") {
+    const { labels, recommendedLabel, addonsHeadline } =
+      await offeringsCopy(locale);
+    const pricing = offeringsPricing(read.shownSet, { locale, labels });
+    if (pricing && (pricing.plans || pricing.addons)) {
+      return renderPage({
+        type: "Pricing",
+        slug: "pricing",
+        locale,
+        translationsNamespace: "pricing",
+        ...(getMdxSource !== undefined && { getMdxSource }),
+        getPageSections: async (frontmatter) =>
+          withOfferings(
+            await getPageSections(frontmatter),
+            pricing,
+            plan,
+            recommendedLabel,
+            addonsHeadline,
+          ),
+      });
+    }
+  }
+
+  const text = contactFormText(
+    await getTranslations({ locale, namespace: "contact" }),
+  );
   return renderPage({
     type: "Pricing",
     slug: "pricing",
     locale,
     translationsNamespace: "pricing",
     ...(getMdxSource !== undefined && { getMdxSource }),
-    ...(getPageSections !== undefined && { getPageSections }),
+    getPageSections: async (frontmatter) =>
+      withContactFallback(await getPageSections(frontmatter)),
+    sectionSlots: {
+      [CONTACT_SECTION_ID]: (
+        <ContactFallback
+          email={readSiteContactEmail()}
+          text={{
+            heading: text.unavailableHeading,
+            body: text.unavailableBody,
+            noEmail: text.unavailableNoEmail,
+          }}
+        />
+      ),
+    },
   });
 }

package/templates/apps/web/app/[locale]/team/__tests__/team-routes.test.tsx

@@ -68,7 +68,10 @@ describe("team/[slug] — the profile page", () => {
     const person = profile["mainEntity"] as JsonLd;
     expect(person["@type"]).toBe("Person");
     expect(person["@id"]).toBe("#person");
-    expect(person["jobTitle"]).toBe(FIRST_MEMBER.frontmatter.schema.jobTitle);
+    // The seed's `jobTitle` is a `{placeholder}` slot, which never reaches the
+    // graph (#8797 D8.5).
+    expect(FIRST_MEMBER.frontmatter.schema.jobTitle).toBe("{Their title}");
+    expect(person).not.toHaveProperty("jobTitle");
 
     const breadcrumb = graph.find((b) => b["@type"] === "BreadcrumbList")!;
     const items = breadcrumb["itemListElement"] as Array<{ item: string }>;

package/templates/apps/web/app/[locale]/unsubscribe/__tests__/unsubscribe-rsc-boundary.test.tsx

@@ -139,6 +139,19 @@ for (const specifier of ["next/link", "next/image", "next/script"]) {
 }
 // `next-intl` is path-independent: jest.config.cjs maps every copy onto one stub.
 jest.doMock("next-intl", () => flight.createClientModuleProxy("next-intl"));
+// #8847 D12 — the page reads the newsletter magnet through
+// `lib/in-page-magnet`, whose module graph reaches `contact.actions`' import
+// of `next/navigation`. Next serves server code that entry's react-server
+// build; under jest it is the client build, which needs a React context, so
+// it is stubbed as `signed-in-nav-rsc-boundary.test.tsx` stubs it.
+jest.doMock("next/navigation", () => ({
+  redirect: () => {
+    throw new Error("redirect");
+  },
+  notFound: () => {
+    throw new Error("NEXT_NOT_FOUND");
+  },
+}));
 
 // ── Render ───────────────────────────────────────────────────────────────────
 
@@ -200,6 +213,10 @@ describe("/[locale]/unsubscribe crosses the RSC → client boundary cleanly", ()
     const { errors, payload } = await renderPageToFlight("tok_1");
     expect(errors).toEqual([]);
     expect(payload).toContain("unsubscribe-page");
+    // #8847 D12 — the island gets the token and the magnet's copy as strings.
+    const props = /"token":"tok_1"[^}]*}/.exec(payload)?.[0] ?? "";
+    expect(props).toContain('"cta":"Unsubscribe"');
+    expect(props).toContain('"doneHeadline":"You\'re unsubscribed."');
   });
 
   it("serializes with no token", async () => {

package/templates/apps/web/app/[locale]/unsubscribe/__tests__/unsubscribe.test.tsx

@@ -40,9 +40,11 @@ jest.mock("next-intl", () => ({
 }));
 
 const mockUnsubscribe = jest.fn();
+const mockFlowsGet = jest.fn();
 jest.mock("@working-theory/api-client", () => ({
   __esModule: true,
   consent: { unsubscribe: (...args: unknown[]) => mockUnsubscribe(...args) },
+  flows: { get: (...args: unknown[]) => mockFlowsGet(...args) },
   visitorForwardHeaders: () => undefined,
 }));
 
@@ -56,8 +58,16 @@ import Page, { generateMetadata } from "../page";
 const ok = <T,>(body: T) => ({ ok: true, body });
 const refusal = (status: number) => ({ ok: false, status, body: null });
 
+// #8847 D12 — the page's newsletter-magnet read is shared for a few seconds
+// per module instance; each test starts an hour later so none sees another's.
+let clock = 1_900_000_000_000;
+jest.spyOn(Date, "now").mockImplementation(() => clock);
+
 beforeEach(() => {
+  clock += 60 * 60 * 1000;
   mockUnsubscribe.mockReset();
+  // The hub unreadable: the seeded newsletterFlowConfig's unsubscribe copy.
+  mockFlowsGet.mockReset().mockRejectedValue(new Error("hub down"));
 });
 
 async function renderPage(token: string | undefined): Promise<void> {
@@ -86,7 +96,7 @@ describe("the page performs no write on GET", () => {
     expect(mockUnsubscribe).not.toHaveBeenCalled();
     expect(screen.getByTestId("unsubscribe-page")).toBeInTheDocument();
     expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Unsubscribe");
-    expect(screen.getByText("Stop these emails?")).toBeInTheDocument();
+    expect(screen.getByText("Stop getting the newsletter by email?")).toBeInTheDocument();
   });
 });
 
@@ -100,7 +110,7 @@ describe("with no token", () => {
 });
 
 describe("clicking Unsubscribe", () => {
-  it("a changed answer shows the done line with the purpose's description", async () => {
+  it("a changed answer shows the magnet's done message (#8847 D12)", async () => {
     mockUnsubscribe.mockResolvedValue(
       ok({ purpose: { id: "marketing_email", description: "product news and offers" }, changed: true }),
     );
@@ -108,7 +118,7 @@ describe("clicking Unsubscribe", () => {
     await userEvent.click(screen.getByTestId("unsubscribe-button"));
     expect(mockUnsubscribe).toHaveBeenCalledWith({ token: "tok_1" });
     expect(await screen.findByTestId("unsubscribe-done")).toHaveTextContent(
-      "You're unsubscribed from product news and offers.",
+      "You're unsubscribed.You won't get the newsletter any more.",
     );
   });
 
@@ -156,3 +166,52 @@ describe("clicking Unsubscribe", () => {
     expect(await screen.findByTestId("unsubscribe-unavailable")).toBeInTheDocument();
   });
 });
+
+describe("the copy comes from the newsletter magnet (#8847 D12, AC-7)", () => {
+  const unsubscribe = {
+    title: { en: "Leave" },
+    body: { en: "Sure?" },
+    cta: { en: "Leave now" },
+    done: { headline: { en: "Gone." } },
+  };
+
+  beforeEach(() => {
+    const { newsletterFlowConfig } = jest.requireActual("@working-theory/validation") as {
+      newsletterFlowConfig: Record<string, unknown>;
+    };
+    const { completionEmail: _omitted, ...body } = newsletterFlowConfig;
+    mockFlowsGet.mockReset().mockResolvedValue({ ok: true, status: 200, body: { ...body, unsubscribe } });
+  });
+
+  it("the title, line and button are the served block's, and so is the done message", async () => {
+    mockUnsubscribe.mockResolvedValue(
+      ok({ purpose: { id: "newsletter", description: "This site's newsletter by email" }, changed: true }),
+    );
+    await renderPage("tok_1");
+    expect(mockFlowsGet).toHaveBeenCalledWith("newsletter");
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Leave");
+    expect(screen.getByText("Sure?")).toBeInTheDocument();
+    expect(screen.getByTestId("unsubscribe-button")).toHaveTextContent("Leave now");
+    await userEvent.click(screen.getByTestId("unsubscribe-button"));
+    expect(await screen.findByTestId("unsubscribe-done")).toHaveTextContent("Gone.");
+  });
+
+  it("generateMetadata's title is the served block's", async () => {
+    const meta = await generateMetadata({
+      params: Promise.resolve({ locale: "en" }),
+      searchParams: Promise.resolve({}),
+    });
+    expect(meta.title).toBe("Leave");
+  });
+
+  it("already still shows the catalog's line", async () => {
+    mockUnsubscribe.mockResolvedValue(
+      ok({ purpose: { id: "newsletter", description: "This site's newsletter by email" }, changed: false }),
+    );
+    await renderPage("tok_1");
+    await userEvent.click(screen.getByTestId("unsubscribe-button"));
+    expect(await screen.findByTestId("unsubscribe-already")).toHaveTextContent(
+      "You were already unsubscribed.",
+    );
+  });
+});

package/templates/apps/web/app/[locale]/unsubscribe/page.tsx

@@ -4,32 +4,73 @@
  * `?t=` token never leaks through a Referer header off this page (D17,
  * SEC-8438-9).
  *
- * RSC: reads `?t=` and renders the heading, the lead and the one
+ * RSC: reads `?t=` and renders the heading, the line and the one
  * interactive piece (`UnsubscribeButton`, "use client") that posts
  * `unsubscribeAction(token)` ON CLICK — never on this GET, so a mail
- * scanner's prefetch writes nothing. The island gets the token and nothing
- * else: it reads its own strings, because anything callable handed across
- * this server→client edge fails Flight serialization (the scaffold matrix's
- * `GET /unsubscribe -> 500`; `__tests__/unsubscribe-rsc-boundary.test.tsx`).
+ * scanner's prefetch writes nothing. The island gets the token and three
+ * strings: anything callable handed across this server→client edge fails
+ * Flight serialization (the scaffold matrix's `GET /unsubscribe -> 500`;
+ * `__tests__/unsubscribe-rsc-boundary.test.tsx`).
+ *
+ * #8847 D12 — the title, line, button and done message come from the
+ * newsletter magnet's `unsubscribe` block (`readServedMagnet`, shared like
+ * /contact's read), else the seeded `newsletterFlowConfig`'s. The token states
+ * (already, invalid, unavailable) keep their catalog lines: they describe
+ * the link, not the newsletter. The frame is /contact's `column` look. The
+ * page renders on every request.
  */
 
+import { SectionFrame } from "@working-theory/ui";
 import { Heading, Text } from "@working-theory/ui/primitives";
+import {
+  NEWSLETTER_FLOW_SLUG,
+  newsletterFlowConfig,
+  resolveLocalizedString,
+  type FlowUnsubscribeCopy,
+} from "@working-theory/validation";
 import type { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
 import type { ReactElement } from "react";
 
+import { readServedMagnet } from "../../../lib/in-page-magnet";
+
 import { UnsubscribeButton } from "./unsubscribe-button";
 
+export const dynamic = "force-dynamic";
+
 interface Props {
   params: Promise<{ locale: string }>;
   searchParams: Promise<{ t?: string }>;
 }
 
+interface UnsubscribeCopy {
+  title: string;
+  body?: string;
+  cta: string;
+  doneHeadline: string;
+  doneBody?: string;
+}
+
+/** The newsletter magnet's unsubscribe copy, else the seeded config's. */
+async function unsubscribeCopy(locale: string): Promise<UnsubscribeCopy> {
+  const served = await readServedMagnet(NEWSLETTER_FLOW_SLUG);
+  const config = served?.unsubscribe ? served : newsletterFlowConfig;
+  const block = config.unsubscribe as FlowUnsubscribeCopy;
+  const resolve = (value: Record<string, string>): string =>
+    resolveLocalizedString(value, locale, config.defaultLocale);
+  return {
+    title: resolve(block.title),
+    ...(block.body !== undefined && { body: resolve(block.body) }),
+    cta: resolve(block.cta),
+    doneHeadline: resolve(block.done.headline),
+    ...(block.done.body !== undefined && { doneBody: resolve(block.done.body) }),
+  };
+}
+
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { locale } = await params;
-  const t = await getTranslations({ locale, namespace: "unsubscribe" });
+  const copy = await unsubscribeCopy(locale);
   return {
-    title: t("title"),
+    title: copy.title,
     robots: { index: false, follow: true },
     referrer: "no-referrer",
   };
@@ -38,17 +79,28 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 export default async function UnsubscribePage({ params, searchParams }: Props): Promise<ReactElement> {
   const { locale } = await params;
   const { t: token } = await searchParams;
-  const t = await getTranslations({ locale, namespace: "unsubscribe" });
+  const copy = await unsubscribeCopy(locale);
 
   return (
-    <div className="mx-auto flex max-w-md flex-col gap-4 px-4 py-16" data-testid="unsubscribe-page">
-      <Heading level={1} visual={2}>
-        {t("title")}
-      </Heading>
-      <Text as="p" variant="body">
-        {t("lead")}
-      </Text>
-      <UnsubscribeButton token={token ?? null} />
-    </div>
+    <SectionFrame sectionId="unsubscribe" className="ailk-contact-frame" data-testid="unsubscribe-page">
+      <div className="ailk-contact-column text-center">
+        <Heading level={1} visual="display" className="ailk-contact-heading text-center">
+          {copy.title}
+        </Heading>
+        {copy.body !== undefined && (
+          <Text as="p" tone="muted" className="mx-auto mt-block-tight ailk-contact-measure text-balance">
+            {copy.body}
+          </Text>
+        )}
+        <div className="ailk-contact-slot mx-auto mt-block-loose flex w-full ailk-contact-measure flex-col items-center">
+          <UnsubscribeButton
+            token={token ?? null}
+            cta={copy.cta}
+            doneHeadline={copy.doneHeadline}
+            {...(copy.doneBody !== undefined && { doneBody: copy.doneBody })}
+          />
+        </div>
+      </div>
+    </SectionFrame>
   );
 }