create-ailk 0.27.0 → 0.28.1

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

@@ -0,0 +1,321 @@
+/**
+ * /pricing/<offering> (#10044 D7, AC-5) — one offering's pricing page.
+ *
+ * A temporary content root carries `_site.mdx` (the contact email) and
+ * `en/Pricing/website-rebuild.mdx`, whose `plans` names `growth` and
+ * `seo-audit` and whose sections carry a written plans section and a written
+ * add-ons section. The real content adapter, page renderer, mapper and
+ * Pricing section run; `global.fetch` answers the shown-offerings route.
+ * The page shares one read for 15 seconds, so every case moves `Date.now`.
+ */
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+
+import { act, render, screen, within } from "@testing-library/react";
+import { validateBlock } from "@working-theory/schema-validator";
+import {
+  workspaceShownSetSchema,
+  type OfferingsPrice,
+  type OfferingsProduct,
+} from "@working-theory/validation";
+
+const mockNotFound = jest.fn(() => {
+  throw new Error("NEXT_NOT_FOUND");
+});
+
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: () => mockNotFound(),
+  redirect: jest.fn(),
+}));
+
+import OfferingPricingPage, { dynamic, generateMetadata } from "../page";
+
+const SLUG = "website-rebuild";
+const SITE_EMAIL = "hello@example.com";
+
+const PAGE = `---
+type: "Pricing"
+slug: "${SLUG}"
+title: "Website Rebuild"
+description: "What a website rebuild costs."
+plans: ["growth", "seo-audit"]
+sections:
+  [
+    { "id": "hero", "type": "hero", "data": { "headline": "Rebuild your site", "variant": "default" } },
+    {
+      "id": "plans",
+      "type": "pricing",
+      "data": {
+        "variant": "three-tiers-with-toggle",
+        "billingToggle": false,
+        "plans": [
+          { "key": "growth", "name": "Written Growth", "price": { "custom": "$4,900" }, "features": ["Ten pages"], "cta": { "label": "Talk to us", "href": "/contact" } }
+        ]
+      }
+    },
+    {
+      "id": "addons",
+      "type": "pricing",
+      "data": {
+        "variant": "addons",
+        "plans": [],
+        "addons": [{ "name": "Written extra page", "price": "$150", "features": [] }]
+      }
+    },
+    { "id": "faq", "type": "faq", "data": { "headline": "Questions", "items": [{ "question": "How long?", "answer": "Six weeks." }] } }
+  ]
+---
+`;
+
+const contentRoot = mkdtempSync(join(tmpdir(), "ailk-10044-"));
+const priorContentRoot = process.env.AILK_CONTENT_ROOT;
+
+beforeAll(() => {
+  Element.prototype.scrollIntoView = jest.fn();
+  mkdirSync(join(contentRoot, "en", "Pricing"), { recursive: true });
+  writeFileSync(join(contentRoot, "en", "Pricing", `${SLUG}.mdx`), PAGE);
+  writeFileSync(
+    join(contentRoot, "_site.mdx"),
+    `---\nsiteName: Example\ncontactEmail: ${SITE_EMAIL}\n---\n`,
+  );
+  process.env.AILK_CONTENT_ROOT = contentRoot;
+});
+
+afterAll(() => {
+  if (priorContentRoot === undefined) delete process.env.AILK_CONTENT_ROOT;
+  else process.env.AILK_CONTENT_ROOT = priorContentRoot;
+  rmSync(contentRoot, { recursive: true, force: true });
+});
+
+// ── The shown set ────────────────────────────────────────────────────────────
+
+const INTERVAL = { monthly: "month", yearly: "year", once: null } as const;
+
+function price(
+  plan: string,
+  period: OfferingsPrice["period"],
+  amount: number,
+): OfferingsPrice {
+  return {
+    priceId: `price_${plan.replace(/-/g, "")}${period}`,
+    lookupKey: `${plan}_${period}`,
+    plan,
+    period,
+    interval: INTERVAL[period],
+    amount,
+    currency: "usd",
+  };
+}
+
+function product(
+  plan: string,
+  ailkGroup: OfferingsProduct["ailkGroup"],
+  name: string,
+  prices: OfferingsPrice[],
+): OfferingsProduct {
+  return {
+    productId: `prod_${plan.replace(/-/g, "")}`,
+    plan,
+    name,
+    description: null,
+    marketingFeatures: [],
+    unitLabel: null,
+    note: null,
+    termsNote: null,
+    ailkGroup,
+    ailkOrder: null,
+    prices,
+    recommended: false,
+  };
+}
+
+function wireSet(list: OfferingsProduct[]) {
+  const {
+    workspaceId: _w,
+    organizationId: _o,
+    ...wire
+  } = workspaceShownSetSchema.parse({
+    workspaceId: "wksp_01890a5d-ac96-774b-bcce-b302099a8057",
+    organizationId: "org_01890a5d-ac96-774b-bcce-b302099a8058",
+    productIds: list.map((o) => o.productId),
+    recommended: { plan: null, addon: null },
+    offerings: list,
+    state: "current",
+    snapshotAt: "2026-10-27T00:00:00.000Z",
+  });
+  return wire;
+}
+
+const GROWTH = product("growth", "plan", "Growth", [
+  price("growth", "monthly", 4900),
+]);
+const SCALE = product("scale", "plan", "Scale", [
+  price("scale", "monthly", 9900),
+]);
+const SEO_AUDIT = product("seo-audit", "addon", "SEO audit", [
+  price("seo-audit", "monthly", 1500),
+]);
+
+type Answer = { status: number; body: unknown };
+
+function shown(list: OfferingsProduct[]): Answer {
+  return {
+    status: 200,
+    body: { ok: true, data: { status: "shown", shownSet: wireSet(list) } },
+  };
+}
+
+const UNCONNECTED: Answer = {
+  status: 200,
+  body: { ok: true, data: { status: "unconnected" } },
+};
+
+let answer: Answer = UNCONNECTED;
+
+const fetchMock: jest.Mock = jest.fn(async () => ({
+  ok: answer.status >= 200 && answer.status < 300,
+  status: answer.status,
+  json: async () => answer.body,
+}));
+
+let clock = Date.now();
+
+beforeEach(() => {
+  clock += 16_000;
+  jest.spyOn(Date, "now").mockImplementation(() => clock);
+  global.fetch = fetchMock;
+  fetchMock.mockClear();
+  mockNotFound.mockClear();
+  answer = UNCONNECTED;
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+async function renderOffering(
+  slug: string = SLUG,
+  search: Record<string, string> = {},
+): Promise<HTMLElement> {
+  const element = await OfferingPricingPage({
+    params: Promise.resolve({ locale: "en", slug }),
+    searchParams: Promise.resolve(search),
+  });
+  let container: HTMLElement | undefined;
+  await act(async () => {
+    ({ container } = render(element));
+  });
+  return container!;
+}
+
+function tierCards(): HTMLElement[] {
+  return screen.queryAllByTestId("pricing-tier-card");
+}
+
+function checkoutLinks(): string[] {
+  return screen
+    .queryAllByRole("link")
+    .map((link) => link.getAttribute("href") ?? "")
+    .filter((href) => href.includes("/api/offerings/checkout/"));
+}
+
+/** Every JSON-LD node on the page, `@graph` flattened. */
+function jsonLdNodes(container: HTMLElement): Array<Record<string, unknown>> {
+  const script = container.querySelector('script[type="application/ld+json"]');
+  if (!script) return [];
+  const doc = JSON.parse(script.textContent ?? "") as Record<string, unknown>;
+  const graph = doc["@graph"];
+  return Array.isArray(graph)
+    ? (graph as Array<Record<string, unknown>>)
+    : [doc];
+}
+
+describe("/pricing/<offering> (#10044 AC-5)", () => {
+  it("renders its written plans and add-ons when Stripe is not connected", async () => {
+    await renderOffering();
+
+    expect(screen.getByText("Written Growth")).not.toBeNull();
+    expect(screen.getByText("$4,900")).not.toBeNull();
+    expect(screen.getByText("Written extra page")).not.toBeNull();
+    expect(screen.getByText("How long?")).not.toBeNull();
+    expect(checkoutLinks()).toEqual([]);
+  });
+
+  it("renders only its own plans' Stripe cards when connected", async () => {
+    answer = shown([GROWTH, SCALE, SEO_AUDIT]);
+    await renderOffering();
+
+    expect(tierCards()).toHaveLength(1);
+    expect(within(tierCards()[0]!).getByText("Growth")).not.toBeNull();
+    expect(screen.queryByText("Scale")).toBeNull();
+    expect(screen.getByText("SEO audit")).not.toBeNull();
+    expect(screen.queryByText("Written Growth")).toBeNull();
+    expect(screen.queryByText("Written extra page")).toBeNull();
+    const links = checkoutLinks();
+    expect(links.length).toBeGreaterThanOrEqual(2);
+    for (const href of links) {
+      expect(href.startsWith("/api/offerings/checkout/")).toBe(true);
+    }
+    expect(links.some((href) => href.includes("scale"))).toBe(false);
+  });
+
+  it.each([
+    ["a shown set carrying none of its plans", shown([SCALE])],
+    ["a 500", { status: 500, body: { ok: false, error: "internal_error" } }],
+  ])("renders the contact email for %s", async (_label, failure) => {
+    answer = failure;
+    await renderOffering();
+
+    const fallback = screen.getByTestId("contact-fallback");
+    expect(fallback.textContent).toContain(SITE_EMAIL);
+    expect(tierCards()).toHaveLength(0);
+    expect(screen.queryByText("Written Growth")).toBeNull();
+    expect(checkoutLinks()).toEqual([]);
+  });
+
+  it("marks the Growth card recommended for ?plan=growth", async () => {
+    answer = shown([GROWTH, SCALE, SEO_AUDIT]);
+    await renderOffering(SLUG, { plan: "growth" });
+
+    const card = tierCards()[0]!;
+    expect(within(card).getByText("Growth")).not.toBeNull();
+    expect(within(card).getByText("Recommended for you")).not.toBeNull();
+  });
+
+  it("emits a WebPage named for the page and a BreadcrumbList ending at /pricing/<slug>", async () => {
+    const container = await renderOffering();
+    const nodes = jsonLdNodes(container);
+
+    const webPage = nodes.find((node) => node["@type"] === "WebPage");
+    expect(webPage?.["name"]).toBe("Website Rebuild");
+    expect(validateBlock(webPage as never, "Pricing")).toEqual(
+      expect.objectContaining({ valid: true }),
+    );
+    const crumbs = nodes.find((node) => node["@type"] === "BreadcrumbList");
+    const items = crumbs?.["itemListElement"] as Array<Record<string, unknown>>;
+    expect(String(items[items.length - 1]!["item"])).toMatch(
+      new RegExp(`/pricing/${SLUG}$`),
+    );
+  });
+
+  it("gives a canonical ending /pricing/<slug> and renders per request", async () => {
+    const metadata = await generateMetadata({
+      params: Promise.resolve({ locale: "en", slug: SLUG }),
+    });
+
+    expect(String(metadata.alternates?.canonical)).toMatch(
+      new RegExp(`/pricing/${SLUG}$`),
+    );
+    expect(dynamic).toBe("force-dynamic");
+  });
+
+  it("answers 404 for the hub's own slug and an unknown slug", async () => {
+    await expect(renderOffering("pricing")).rejects.toThrow("NEXT_NOT_FOUND");
+    await expect(renderOffering("no-such-offering")).rejects.toThrow(
+      "NEXT_NOT_FOUND",
+    );
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,87 @@
+// One offering's pricing page (#10044 D7) — /pricing/<offering>, a `Pricing`
+// content file (`content/<locale>/Pricing/<offering>.mdx`) added with
+// add-page and listed by the /pricing hub. It renders its own sections — its
+// plans, add-ons, FAQ and call to action — in one of three states, the
+// /pricing rules (lib/pricing-page.ts, #8927):
+//   - unconnected — its written prices, `?plan=` moving the recommendation;
+//   - a current shown set — the Stripe cards of the plans its `plans`
+//     frontmatter names in place of its written `pricing` sections;
+//   - anything else, or none of its plans shown — the contact email there.
+//
+// The hub's own file (slug `pricing`) is /pricing, never /pricing/pricing.
+// Unknown slugs 404 through renderPage's detail branch (no
+// `translationsNamespace` is passed, #7537).
+//
+// Stripe text reaches markup only as React text and JSON-LD only through
+// renderPage's serializer (T4).
+import type {
+  getMdxSource as defaultGetMdxSource,
+  getPageSections as defaultGetPageSections,
+} from "@working-theory/page-renderer";
+import {
+  getPageSections as loadPageSections,
+  renderPage,
+  renderPageMetadata,
+} from "@working-theory/page-renderer";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import type { ReactElement } from "react";
+
+import {
+  pagePlans,
+  PRICING_HUB_SLUG,
+  pricingSections,
+  pricingSectionSlots,
+} from "../../../../lib/pricing-page";
+
+// Never prerendered; the Offerings read behind it is shared per instance (#8927 D2).
+export const dynamic = "force-dynamic";
+
+interface Props {
+  params: Promise<{ locale: string; slug: string }>;
+  searchParams?: Promise<Record<string, string | string[] | undefined>>;
+  getMdxSource?: typeof defaultGetMdxSource;
+  getPageSections?: typeof defaultGetPageSections;
+}
+
+type Section = Awaited<ReturnType<typeof defaultGetPageSections>>[number];
+
+export async function generateMetadata({
+  params,
+}: Pick<Props, "params">): Promise<Metadata> {
+  const { locale, slug } = await params;
+  return renderPageMetadata({ type: "Pricing", slug, locale });
+}
+
+export default async function Page({
+  params,
+  searchParams,
+  getMdxSource,
+  getPageSections,
+}: Props): Promise<ReactElement> {
+  const { locale, slug } = await params;
+  if (slug === PRICING_HUB_SLUG) {
+    notFound();
+  }
+  const search = (await searchParams) ?? {};
+  const plan = Array.isArray(search.plan) ? search.plan[0] : search.plan;
+  const loadSections = getPageSections ?? loadPageSections;
+
+  /** The page's sections in its Offerings state; runs only when it exists. */
+  async function withPricing(frontmatter: unknown): Promise<Section[]> {
+    return pricingSections(await loadSections(frontmatter), {
+      plans: pagePlans(frontmatter),
+      plan,
+      locale,
+    });
+  }
+
+  return renderPage({
+    type: "Pricing",
+    slug,
+    locale,
+    getPageSections: withPricing,
+    sectionSlots: await pricingSectionSlots(locale),
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}

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

@@ -555,6 +555,9 @@ describe("/pricing shows the contact email when there is nothing to sell (#8927
 const OFFERINGS_SOURCES = [
   "apps/web/app/[locale]/pricing/page.tsx",
   "apps/web/lib/offerings-pricing.ts",
+  // #10044 — the shared Pricing render and the offering pricing page.
+  "apps/web/lib/pricing-page.ts",
+  "apps/web/app/[locale]/pricing/[slug]/page.tsx",
 ];
 const REPO_ROOT = resolve(__dirname, "../../../../../..");
 

package/templates/apps/web/app/[locale]/pricing/__tests__/pricing-pages.test.tsx

@@ -0,0 +1,215 @@
+/**
+ * /pricing lists every offering pricing page (#10044 D6, AC-4).
+ *
+ * The hub's source and sections are DI-injected and `listPages` answers the
+ * offering pages, so the real renderPage, SectionRenderer and Items section
+ * run and the assertions read the served DOM. A hub with nothing to list is
+ * compared with `renderPage` called directly, the `unconnected.test.tsx`
+ * equality-oracle shape.
+ *
+ * `global.fetch` answers the shown-offerings route; each case moves
+ * `Date.now` past the page's 15-second shared read.
+ */
+import { act, render, screen, within } from "@testing-library/react";
+import { renderPage } from "@working-theory/page-renderer";
+import type { ReactElement } from "react";
+
+import type { DetailPage } from "../../../../lib/route-family";
+import PricingPage from "../page";
+
+const HUB_FRONTMATTER = {
+  type: "Pricing",
+  slug: "pricing",
+  title: "Pricing",
+  description: "Plans for every stage.",
+};
+
+const SECTIONS = [
+  {
+    id: "hero",
+    type: "hero",
+    data: { headline: "Find your plan", variant: "default" },
+  },
+  {
+    id: "plans",
+    type: "pricing",
+    data: {
+      variant: "three-tiers-with-toggle",
+      billingToggle: false,
+      plans: [
+        {
+          key: "basic",
+          name: "Written Basic",
+          price: { monthly: "$29" },
+          features: ["One site"],
+          cta: { label: "Choose Basic", href: "/checkout/basic" },
+        },
+      ],
+    },
+  },
+  {
+    id: "closing",
+    type: "cta",
+    data: {
+      headline: "Still deciding?",
+      primaryCta: { label: "Talk to us", href: "/contact" },
+    },
+  },
+];
+
+function source(frontmatter: Record<string, unknown>) {
+  return jest.fn().mockResolvedValue({ frontmatter, body: "" });
+}
+
+const getPageSections = jest.fn().mockResolvedValue(SECTIONS);
+
+function pages(...list: DetailPage[]): jest.Mock {
+  return jest.fn().mockResolvedValue(list);
+}
+
+const A: DetailPage = {
+  slug: "a",
+  frontmatter: {
+    type: "Pricing",
+    slug: "a",
+    title: "Offering A",
+    description: "Description A.",
+    summary: "Summary A.",
+  },
+};
+const B: DetailPage = {
+  slug: "b",
+  frontmatter: {
+    type: "Pricing",
+    slug: "b",
+    title: "Offering B",
+    description: "Description B.",
+  },
+};
+const HUB: DetailPage = { slug: "pricing", frontmatter: HUB_FRONTMATTER };
+
+let shownAnswer: unknown = { status: "unconnected" };
+
+const fetchMock: jest.Mock = jest.fn(async () => ({
+  ok: true,
+  status: 200,
+  json: async () => ({ ok: true, data: shownAnswer }),
+}));
+
+let clock = Date.now();
+
+beforeAll(() => {
+  Element.prototype.scrollIntoView = jest.fn();
+});
+
+beforeEach(() => {
+  clock += 16_000;
+  jest.spyOn(Date, "now").mockImplementation(() => clock);
+  global.fetch = fetchMock;
+  fetchMock.mockClear();
+  shownAnswer = { status: "unconnected" };
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+/** `useId` values renumbered by first appearance, as `unconnected.test.tsx` does. */
+function stableIds(markup: string): string {
+  const seen = new Map<string, string>();
+  return markup.replace(/_r_[0-9a-z]+_/g, (id) => {
+    if (!seen.has(id)) seen.set(id, `_r_id${seen.size}_`);
+    return seen.get(id)!;
+  });
+}
+
+async function html(element: ReactElement): Promise<string> {
+  let container: HTMLElement | undefined;
+  await act(async () => {
+    ({ container } = render(element));
+  });
+  return stableIds(container!.innerHTML);
+}
+
+async function hub(
+  listPages: jest.Mock,
+  frontmatter: Record<string, unknown> = HUB_FRONTMATTER,
+): Promise<ReactElement> {
+  return PricingPage({
+    params: Promise.resolve({ locale: "en" }),
+    searchParams: Promise.resolve({}),
+    getMdxSource: source(frontmatter),
+    getPageSections,
+    listPages,
+  });
+}
+
+/** True when `a` comes before `b` in document order. */
+function before(a: Element, b: Element): boolean {
+  return (
+    (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0
+  );
+}
+
+describe("/pricing lists the offering pricing pages (#10044 AC-4)", () => {
+  it("renders one card per offering page in slug order, before the closing CTA", async () => {
+    await html(await hub(pages(A, B, HUB)));
+
+    const heading = screen.getByText("Pricing by offering");
+    const list = heading.closest("section") ?? document.body;
+    const links = within(list)
+      .getAllByRole("link")
+      .map((link) => link.getAttribute("href"));
+    expect(links.filter((href) => href?.includes("/pricing/"))).toEqual([
+      expect.stringMatching(/\/pricing\/a$/),
+      expect.stringMatching(/\/pricing\/b$/),
+    ]);
+    expect(within(list).getByText("Offering A")).not.toBeNull();
+    expect(within(list).getByText("Summary A.")).not.toBeNull();
+    expect(within(list).queryByText("Description A.")).toBeNull();
+    expect(within(list).getByText("Description B.")).not.toBeNull();
+    expect(within(list).queryByText("Pricing", { exact: true })).toBeNull();
+    expect(before(heading, screen.getByText("Still deciding?"))).toBe(true);
+    expect(before(screen.getByText("Written Basic"), heading)).toBe(true);
+  });
+
+  it.each([
+    ["only the hub's own page", [HUB]],
+    [
+      "the hub plus a file whose frontmatter slug is `pricing`",
+      [HUB, { slug: "x", frontmatter: { ...HUB_FRONTMATTER } }],
+    ],
+  ])("renders today's page with %s", async (_label, list) => {
+    const served = await html(await hub(pages(...list)));
+    const oracle = await html(
+      await renderPage({
+        type: "Pricing",
+        slug: "pricing",
+        locale: "en",
+        translationsNamespace: "pricing",
+        getMdxSource: source(HUB_FRONTMATTER),
+        getPageSections,
+      }),
+    );
+
+    expect(served).toBe(oracle);
+    expect(served).not.toContain("Pricing by offering");
+  });
+
+  it("with the hub's `plans: []` and a shown set, renders its written sections and no Stripe card or contact section", async () => {
+    shownAnswer = { status: "shown", shownSet: { state: "current" } };
+    await html(await hub(pages(A), { ...HUB_FRONTMATTER, plans: [] }));
+
+    expect(fetchMock).not.toHaveBeenCalled();
+    expect(screen.getByText("Written Basic")).not.toBeNull();
+    expect(screen.queryByTestId("contact-fallback")).toBeNull();
+    expect(
+      screen
+        .queryAllByRole("link")
+        .some((link) =>
+          link.getAttribute("href")?.includes("/api/offerings/checkout/"),
+        ),
+    ).toBe(false);
+    expect(screen.getByText("Pricing by offering")).not.toBeNull();
+  });
+});