create-ailk 0.22.0 → 0.23.0

package/templates/apps/web/lib/__tests__/offerings-pricing.test.ts

@@ -0,0 +1,601 @@
+/**
+ * The shown set → Pricing section data mapper (#8925, spec
+ * docs/specs/8925-map-the-workspace-shown-set-spec.md AC-1–AC-4, AC-7).
+ *
+ * The fixture is parsed with `workspaceShownSetSchema` before use, so it
+ * cannot drift from spec 8876 D4. Its offerings are deliberately not in name
+ * or price order, so a sort fails AC-1. The labels are sentinels (`⟪`), so
+ * any copy the mapper invents shows up in AC-7.
+ */
+import { render } from "@testing-library/react";
+import { Pricing } from "@working-theory/ui/sections";
+import {
+  parseLookupKey,
+  PricingSectionDataSchema,
+  workspaceShownSetSchema,
+  type OfferingsPrice,
+  type OfferingsProduct,
+  type WorkspaceShownSet,
+} from "@working-theory/validation";
+import React from "react";
+
+import {
+  formatMinorUnits,
+  OFFERINGS_CHECKOUT_PATH,
+  offeringsCheckoutHref,
+  offeringsPricing,
+  type OfferingsPricing,
+  type OfferingsPricingLabels,
+} from "../offerings-pricing";
+
+const LABELS: OfferingsPricingLabels = {
+  cta: "CTA⟪",
+  recommended: "REC⟪",
+  monthly: (amount) => "M⟪" + amount,
+  annual: (amount) => "Y⟪" + amount,
+  oneTime: (amount) => "O⟪" + amount,
+};
+
+const OPTIONS = { locale: "en-US", labels: LABELS };
+
+const PERIOD_INTERVAL = {
+  monthly: "month",
+  yearly: "year",
+  once: null,
+} as const;
+
+function price(
+  plan: string,
+  period: OfferingsPrice["period"],
+  amount: number,
+  currency: string,
+): OfferingsPrice {
+  return {
+    priceId: `price_${plan.replace(/-/g, "")}${period}`,
+    lookupKey: `${plan}_${period}`,
+    plan,
+    period,
+    interval: PERIOD_INTERVAL[period],
+    amount,
+    currency,
+  };
+}
+
+function product(
+  plan: string,
+  ailkGroup: OfferingsProduct["ailkGroup"],
+  prices: OfferingsPrice[],
+  extra: Partial<OfferingsProduct> = {},
+): OfferingsProduct {
+  return {
+    productId: `prod_${plan.replace(/-/g, "")}`,
+    plan,
+    name: plan.charAt(0).toUpperCase() + plan.slice(1),
+    description: null,
+    marketingFeatures: [],
+    unitLabel: null,
+    note: null,
+    termsNote: null,
+    ailkGroup,
+    ailkOrder: null,
+    prices,
+    recommended: false,
+    ...extra,
+  };
+}
+
+function fixtureOfferings(): OfferingsProduct[] {
+  return [
+    product("starter", "plan", [price("starter", "yearly", 50000, "jpy")], {
+      name: "Starter",
+      marketingFeatures: ["One site", "Email support"],
+    }),
+    product(
+      "growth",
+      "plan",
+      [
+        price("growth", "monthly", 4900, "usd"),
+        price("growth", "yearly", 49000, "usd"),
+      ],
+      {
+        name: "Growth",
+        description: "For teams that ship weekly",
+        marketingFeatures: ["Ten sites", "Priority support"],
+        unitLabel: "per seat",
+        note: "Billed per active seat",
+        termsNote: "Cancel any time from your account",
+        recommended: true,
+      },
+    ),
+    product(
+      "basic",
+      "plan",
+      [
+        price("basic", "once", 150000, "usd"),
+        price("basic", "monthly", 1000, "usd"),
+      ],
+      { name: "Basic" },
+    ),
+    product(
+      "seo-audit",
+      "addon",
+      [price("seo-audit", "monthly", 1950, "eur")],
+      {
+        name: "SEO audit",
+        marketingFeatures: ["Monthly report"],
+        unitLabel: "per site",
+        recommended: true,
+      },
+    ),
+    product(
+      "audit-pack",
+      "addon",
+      [
+        price("audit-pack", "monthly", 2900, "usd"),
+        price("audit-pack", "yearly", 29000, "usd"),
+      ],
+      { name: "Audit pack" },
+    ),
+  ];
+}
+
+function shownSet(
+  edit: (set: WorkspaceShownSet) => void = () => {},
+): WorkspaceShownSet {
+  const offerings = fixtureOfferings();
+  const set: WorkspaceShownSet = {
+    workspaceId: "wksp_01890a5d-ac96-774b-bcce-b302099a8057",
+    organizationId: "org_01890a5d-ac96-774b-bcce-b302099a8058",
+    productIds: offerings.map((o) => o.productId),
+    recommended: { plan: "prod_growth", addon: "prod_seoaudit" },
+    offerings,
+    state: "current",
+    snapshotAt: "2026-10-18T00:00:00.000Z",
+  };
+  edit(set);
+  return workspaceShownSetSchema.parse(set);
+}
+
+function offering(set: WorkspaceShownSet, plan: string): OfferingsProduct {
+  const found = set.offerings.find((o) => o.plan === plan);
+  if (!found) throw new Error(`no offering ${plan}`);
+  return found;
+}
+
+function mapped(set: unknown = shownSet()): OfferingsPricing {
+  const result = offeringsPricing(set, OPTIONS);
+  if (!result) throw new Error("expected a mapping");
+  return result;
+}
+
+function plansOf(result: OfferingsPricing) {
+  if (!result.plans) throw new Error("expected a plans fragment");
+  return result.plans.plans;
+}
+
+/** The mapper's tiles carry `key` beside the fields `AddonCard` reads (D3). */
+type Tile = NonNullable<
+  NonNullable<OfferingsPricing["addons"]>["addons"]
+>[number] & {
+  key: string;
+};
+
+function addonsOf(result: OfferingsPricing): Tile[] {
+  if (!result.addons?.addons) throw new Error("expected an add-ons fragment");
+  return result.addons.addons as Tile[];
+}
+
+function card(result: OfferingsPricing, key: string) {
+  const found = plansOf(result).find((p) => p.key === key);
+  if (!found) throw new Error(`no card ${key}`);
+  return found;
+}
+
+function tile(result: OfferingsPricing, key: string) {
+  const found = addonsOf(result).find((t) => t.key === key);
+  if (!found) throw new Error(`no tile ${key}`);
+  return found;
+}
+
+function hrefFor(lookupKey: string): string {
+  return `${OFFERINGS_CHECKOUT_PATH}/${lookupKey}`;
+}
+
+/** The card's price field → the period of the Price it was formatted from. */
+const FIELD_PERIOD = {
+  monthly: "monthly",
+  annual: "yearly",
+  custom: "once",
+} as const;
+
+/** `PricingTierCard`'s own pick of which price field a mode displays. */
+function shownField(
+  price: {
+    monthly?: string | undefined;
+    annual?: string | undefined;
+    custom?: string | undefined;
+  },
+  mode: "monthly" | "annual",
+): keyof typeof FIELD_PERIOD | undefined {
+  const order =
+    mode === "annual"
+      ? (["annual", "monthly", "custom"] as const)
+      : (["monthly", "annual", "custom"] as const);
+  return order.find((field) => price[field] !== undefined);
+}
+
+describe("offeringsPricing — one card per Product (AC-1)", () => {
+  it("keeps snapshot order, splits plans from add-ons and keys each card by {plan}", () => {
+    const result = mapped();
+    expect(plansOf(result).map((p) => p.key)).toEqual([
+      "starter",
+      "growth",
+      "basic",
+    ]);
+    expect(addonsOf(result).map((t) => t.key)).toEqual([
+      "seo-audit",
+      "audit-pack",
+    ]);
+    expect(result.addons?.plans).toEqual([]);
+    expect(result.plans?.variant).toBe("three-tiers-with-toggle");
+    expect(result.plans?.cardLayout).toBe("centered");
+    expect(result.addons?.variant).toBe("addons");
+  });
+
+  it("highlights the recommended plan and the recommended add-on only", () => {
+    const result = mapped();
+    const highlighted = plansOf(result).filter((p) => p.highlighted);
+    expect(highlighted.map((p) => p.key)).toEqual(["growth"]);
+    expect(highlighted[0]).toMatchObject({
+      highlighted: true,
+      highlightStyle: "pill",
+      highlightLabel: "REC⟪",
+    });
+    const flagged = addonsOf(result).filter((t) => t.eyebrow !== undefined);
+    expect(flagged.map((t) => t.key)).toEqual(["seo-audit"]);
+    expect(flagged[0]).toMatchObject({ eyebrow: "REC⟪", checkTone: "primary" });
+    expect(tile(result, "audit-pack").checkTone).toBeUndefined();
+  });
+
+  it("highlights only the first recommended Product of a group", () => {
+    const result = mapped(
+      shownSet((set) => {
+        offering(set, "basic").recommended = true;
+      }),
+    );
+    expect(
+      plansOf(result)
+        .filter((p) => p.highlighted)
+        .map((p) => p.key),
+    ).toEqual(["growth"]);
+    expect(card(result, "basic").highlightLabel).toBeUndefined();
+  });
+});
+
+describe("offeringsPricing — periods, the switch and the fields (AC-2)", () => {
+  it("maps yearly to annual and lands unit, note and terms note in their fields", () => {
+    const growth = card(mapped(), "growth");
+    expect(growth.price).toEqual({ monthly: "M⟪$49", annual: "Y⟪$490" });
+    expect(growth.priceUnit).toBe("per seat");
+    expect(growth.priceSubhead).toBe("Billed per active seat");
+    expect(growth.priceFootnote).toBe("Cancel any time from your account");
+    expect(growth.name).toBe("Growth");
+    expect(growth.description).toBe("For teams that ship weekly");
+    expect(growth.features).toEqual(["Ten sites", "Priority support"]);
+  });
+
+  it("shows a recurring Price over a once Price, and maps once to one-time", () => {
+    const basic = card(mapped(), "basic");
+    expect(basic.price).toEqual({ monthly: "M⟪$10" });
+    expect(basic.cta.href).toBe(hrefFor("basic_monthly"));
+
+    const onceOnly = card(
+      mapped(
+        shownSet((set) => {
+          const b = offering(set, "basic");
+          b.prices = b.prices.filter((p) => p.period !== "monthly");
+        }),
+      ),
+      "basic",
+    );
+    expect(onceOnly.price).toEqual({ custom: "O⟪$1,500" });
+    expect(onceOnly.cta.href).toBe(hrefFor("basic_once"));
+  });
+
+  it("formats a zero-decimal yearly-only price without a monthly figure", () => {
+    expect(card(mapped(), "starter").price).toEqual({ annual: "Y⟪¥50,000" });
+  });
+
+  it("shows a yearly Price over a once Price beside it", () => {
+    const basic = card(
+      mapped(
+        shownSet((set) => {
+          const b = offering(set, "basic");
+          b.prices = [
+            price("basic", "once", 150000, "usd"),
+            price("basic", "yearly", 10000, "usd"),
+          ];
+        }),
+      ),
+      "basic",
+    );
+    expect(basic.price).toEqual({ annual: "Y⟪$100" });
+    expect(basic.cta.href).toBe(hrefFor("basic_yearly"));
+  });
+
+  it("omits the optional fields a Product does not carry", () => {
+    const starter = card(mapped(), "starter");
+    for (const field of [
+      "description",
+      "priceUnit",
+      "priceSubhead",
+      "priceFootnote",
+    ]) {
+      expect(starter).not.toHaveProperty(field);
+    }
+    expect(starter).not.toHaveProperty("annualCtaHref");
+  });
+
+  it("produces the switch only when a plan Product has both monthly and yearly", () => {
+    expect(mapped().plans?.billingToggle).toBe(true);
+    const noTwoPrice = mapped(
+      shownSet((set) => {
+        const g = offering(set, "growth");
+        g.prices = g.prices.filter((p) => p.period !== "yearly");
+      }),
+    );
+    expect(noTwoPrice.plans?.billingToggle).toBe(false);
+  });
+
+  it("formats amounts from minor units with each currency's exponent", () => {
+    expect(formatMinorUnits(4950, "usd", "en-US")).toBe("$49.50");
+    expect(formatMinorUnits(500, "jpy", "en-US")).toBe("¥500");
+    expect(formatMinorUnits(12340, "kwd", "en-US")).toContain("12.340");
+    const euro = formatMinorUnits(4900, "eur", "de-DE");
+    expect(euro).toContain("49");
+    expect(euro).toContain("€");
+  });
+
+  it("falls back to en for a locale Intl refuses", () => {
+    expect(formatMinorUnits(4900, "usd", "not a locale!")).toBe("$49");
+  });
+
+  it("links, in each billing mode, the Price that mode displays", () => {
+    const set = shownSet();
+    const result = mapped(set);
+    for (const plan of plansOf(result)) {
+      const source = offering(set, plan.key!);
+      for (const mode of ["monthly", "annual"] as const) {
+        const field = shownField(plan.price, mode);
+        expect(field).toBeDefined();
+        const expected = hrefFor(`${source.plan}_${FIELD_PERIOD[field!]}`);
+        const linked =
+          mode === "annual"
+            ? (plan.annualCtaHref ?? plan.cta.href)
+            : plan.cta.href;
+        expect(linked).toBe(expected);
+      }
+    }
+    expect(
+      plansOf(result)
+        .filter((p) => p.annualCtaHref !== undefined)
+        .map((p) => p.key),
+    ).toEqual(["growth"]);
+    expect(card(result, "growth").annualCtaHref).toBe(hrefFor("growth_yearly"));
+  });
+
+  it("formats an add-on tile's shown price and links its monthly Price", () => {
+    const result = mapped();
+    const seo = tile(result, "seo-audit");
+    expect(seo.price).toBe("M⟪€19.50");
+    expect(seo.qualifier).toBe("per site");
+    expect(seo.features).toEqual(["Monthly report"]);
+    expect(seo.cta?.href).toBe(hrefFor("seo-audit_monthly"));
+    expect(tile(result, "audit-pack").cta?.href).toBe(
+      hrefFor("audit-pack_monthly"),
+    );
+  });
+});
+
+describe("offeringsPricing — Stripe text stays text; every link is ours (AC-3)", () => {
+  const HOSTILE_DESCRIPTION = "Fast <b>bold</b> javascript:alert(1) \u202Eevil";
+
+  function hostile(): WorkspaceShownSet {
+    return shownSet((set) => {
+      const g = offering(set, "growth");
+      g.description = HOSTILE_DESCRIPTION;
+      g.name = "javascript:alert(1)";
+    });
+  }
+
+  it("emits a hostile description as plain text with the bidi override removed", () => {
+    const growth = card(mapped(hostile()), "growth");
+    expect(growth.description).toBe(
+      "Fast <b>bold</b> javascript:alert(1) evil",
+    );
+    expect(growth.name).toBe("javascript:alert(1)");
+  });
+
+  it("removes format characters from every Stripe field, keeping newlines in a description only", () => {
+    // U+202E (bidi override), U+200B (zero-width space), U+0007 (bell).
+    const dirty = (text: string) => `\u202E${text}\u200B\u0007`;
+    const result = mapped(
+      shownSet((set) => {
+        const g = offering(set, "growth");
+        g.name = dirty("Growth");
+        g.description = "line one\nline two";
+        g.marketingFeatures = [dirty("Ten sites"), "\u200B"];
+        g.unitLabel = dirty("per seat");
+        g.note = "note\none";
+        g.termsNote = dirty("Terms");
+        const seo = offering(set, "seo-audit");
+        seo.name = dirty("SEO audit");
+        seo.marketingFeatures = [dirty("Monthly report")];
+        seo.unitLabel = dirty("per site");
+      }),
+    );
+    expect(card(result, "growth")).toMatchObject({
+      name: "Growth",
+      description: "line one\nline two",
+      features: ["Ten sites"],
+      priceUnit: "per seat",
+      priceSubhead: "noteone",
+      priceFootnote: "Terms",
+    });
+    expect(tile(result, "seo-audit")).toMatchObject({
+      name: "SEO audit",
+      features: ["Monthly report"],
+      qualifier: "per site",
+    });
+  });
+
+  it("builds every href from our route and a key parseLookupKey accepts", () => {
+    const set = hostile();
+    const result = mapped(set);
+    const links: Array<{ plan: string; href: string }> = [];
+    for (const plan of plansOf(result)) {
+      links.push({ plan: plan.key!, href: plan.cta.href });
+      if (plan.annualCtaHref)
+        links.push({ plan: plan.key!, href: plan.annualCtaHref });
+    }
+    for (const t of addonsOf(result))
+      links.push({ plan: t.key, href: t.cta!.href });
+    expect(links).toHaveLength(6);
+
+    for (const { plan, href } of links) {
+      const match = /^\/api\/offerings\/checkout\/(.+)$/.exec(href);
+      expect(match).not.toBeNull();
+      const key = match![1]!;
+      expect(parseLookupKey(key)).not.toBeNull();
+      expect(offering(set, plan).prices.map((p) => p.lookupKey)).toContain(key);
+      expect(href).not.toContain("javascript");
+      expect(href).not.toContain("<");
+    }
+  });
+
+  it("answers null from offeringsCheckoutHref for a key outside the grammar", () => {
+    expect(offeringsCheckoutHref("growth_monthly")).toBe(
+      "/api/offerings/checkout/growth_monthly",
+    );
+    expect(offeringsCheckoutHref("growth_quarterly")).toBeNull();
+    expect(offeringsCheckoutHref("javascript:alert(1)")).toBeNull();
+    expect(offeringsCheckoutHref("../admin_monthly")).toBeNull();
+  });
+
+  it("renders through the Pricing section as literal text with no script link", () => {
+    const fragment = mapped(hostile()).plans!;
+    const { container } = render(
+      React.createElement(Pricing, { sectionName: "pricing", data: fragment }),
+    );
+    expect(container.querySelector("b")).toBeNull();
+    expect(container.textContent).toContain("<b>bold</b>");
+    expect(container.textContent).not.toContain("\u202E");
+    const anchors = Array.from(container.querySelectorAll("a"));
+    expect(anchors.length).toBeGreaterThan(0);
+    for (const anchor of anchors) {
+      expect(anchor.getAttribute("href") ?? "").not.toMatch(/^javascript:/i);
+    }
+  });
+});
+
+describe("offeringsPricing — nothing to show is null (AC-4)", () => {
+  it("answers null for an absent, refused, expired, empty or bare shown set", () => {
+    expect(offeringsPricing(undefined, OPTIONS)).toBeNull();
+
+    const refused = JSON.parse(JSON.stringify(shownSet())) as {
+      offerings: Array<{ prices: Array<{ lookupKey: string }> }>;
+    };
+    refused.offerings[1]!.prices[0]!.lookupKey = "growth_quarterly";
+    expect(offeringsPricing(refused, OPTIONS)).toBeNull();
+
+    for (const state of ["expired", "empty"] as const) {
+      expect(offeringsPricing({ ...shownSet(), state }, OPTIONS)).toBeNull();
+    }
+    expect(
+      offeringsPricing({ ...shownSet(), offerings: [] }, OPTIONS),
+    ).toBeNull();
+  });
+
+  it("answers a null fragment for a group with no Product", () => {
+    const plansOnly = mapped(
+      shownSet((set) => {
+        set.offerings = set.offerings.filter((o) => o.ailkGroup === "plan");
+      }),
+    );
+    expect(plansOnly.addons).toBeNull();
+    expect(plansOnly.plans).not.toBeNull();
+
+    const addonsOnly = mapped(
+      shownSet((set) => {
+        set.offerings = set.offerings.filter((o) => o.ailkGroup === "addon");
+      }),
+    );
+    expect(addonsOnly.plans).toBeNull();
+    expect(addonsOnly.addons).not.toBeNull();
+  });
+
+  it("answers fragments the Pricing section schema accepts", () => {
+    const result = mapped();
+    for (const fragment of [result.plans, result.addons]) {
+      expect(PricingSectionDataSchema.safeParse(fragment).success).toBe(true);
+    }
+  });
+});
+
+describe("offeringsPricing — no copy of its own (AC-7)", () => {
+  it("routes every non-Stripe visible string through the caller's labels", () => {
+    const result = mapped();
+    const visible: string[] = [];
+    for (const plan of plansOf(result)) {
+      visible.push(
+        plan.cta.label,
+        ...Object.values(plan.price).filter(
+          (p): p is string => p !== undefined,
+        ),
+      );
+      if (plan.highlightLabel) visible.push(plan.highlightLabel);
+    }
+    for (const t of addonsOf(result)) {
+      visible.push(t.cta!.label, t.price);
+      if (t.eyebrow) visible.push(t.eyebrow);
+    }
+    for (const text of visible) expect(text).toContain("⟪");
+
+    const serialized = JSON.stringify(result);
+    for (const english of [
+      "Recommended",
+      "/mo",
+      "/yr",
+      "one-time",
+      "Get started",
+      "Buy",
+    ]) {
+      expect(serialized).not.toContain(english);
+    }
+  });
+});
+
+describe("offeringsPricing — the route's wire shape (#8927 D3, AC-7)", () => {
+  /** The shown set as `GET /v1/content/shown-offerings` sends it: no ids. */
+  function wireSet(): Omit<
+    WorkspaceShownSet,
+    "workspaceId" | "organizationId"
+  > {
+    const { workspaceId: _w, organizationId: _o, ...wire } = shownSet();
+    return wire;
+  }
+
+  it("maps a set without workspaceId and organizationId as it maps the full set", () => {
+    const result = offeringsPricing(wireSet(), OPTIONS);
+
+    expect(result).not.toBeNull();
+    expect(result).toEqual(mapped());
+  });
+
+  it("still refuses an unknown top-level key or a malformed id", () => {
+    expect(offeringsPricing({ ...wireSet(), extra: true }, OPTIONS)).toBeNull();
+    expect(
+      offeringsPricing({ ...wireSet(), workspaceId: "not-an-id" }, OPTIONS),
+    ).toBeNull();
+  });
+});