create-ailk 0.20.0 → 0.22.0

package/templates/apps/web/app/[locale]/contact/__tests__/contact-form-magnet.test.ts

@@ -0,0 +1,138 @@
+/**
+ * contactFormFromConfig (#8661 D6) — a Contact form magnet's config mapped
+ * onto the shared `LeadCaptureForm` block's fields, statement and label.
+ *
+ * AC-3: the seeded config maps to the five-field form in order (the terms box
+ * is the statement, not a field); a relabelled subject and a sixth option
+ * render; a config the action cannot submit (no `name`, a non-field first
+ * step) is `null`; `address` and a second `consent` field are not rendered;
+ * copy resolves per locale. AC-5's fallback is the same mapping over the
+ * built-in config, which is never `null`.
+ */
+import {
+  CONTACT_FORM_SUBJECT_OPTIONS,
+  CONTACT_FORM_TERMS_STATEMENT,
+  contactFormFlowConfig,
+  type FlowConfig,
+} from "@working-theory/validation";
+
+import { contactFormFromConfig } from "../contact-form-magnet";
+
+type FieldStep = Extract<FlowConfig["steps"][number], { type: "field" }>;
+
+/** A deep copy of the seeded config, so a case can edit it freely. */
+function seeded(): FlowConfig {
+  return JSON.parse(JSON.stringify(contactFormFlowConfig)) as FlowConfig;
+}
+
+function firstStep(config: FlowConfig): FieldStep {
+  return config.steps[0] as FieldStep;
+}
+
+describe("contactFormFromConfig — the seeded config (AC-3)", () => {
+  const view = contactFormFromConfig(contactFormFlowConfig, "en");
+
+  it("is never null", () => {
+    expect(view).not.toBeNull();
+  });
+
+  it("maps name, email, subject and message, in order", () => {
+    expect(view!.fields.map((f) => f.name)).toEqual(["name", "email", "subject", "message"]);
+    expect(view!.fields.map((f) => f.required)).toEqual([true, true, false, false]);
+    expect(view!.fields.map((f) => f.type)).toEqual(["text", "email", "select", "textarea"]);
+    expect(view!.fields.map((f) => f.label)).toEqual(["Name", "Email", "Subject", "Message"]);
+  });
+
+  it("pairs name and email, and runs every other field full width", () => {
+    expect(view!.fields.map((f) => f.colSpan)).toEqual([1, 1, 2, 2]);
+  });
+
+  it("gives the subject its five options as { value, label } pairs and its placeholder", () => {
+    const subject = view!.fields.find((f) => f.name === "subject")!;
+    expect(subject.options).toEqual(
+      CONTACT_FORM_SUBJECT_OPTIONS.map((value) => ({ value, label: value })),
+    );
+    expect(subject.placeholder).toBe("Choose a subject");
+  });
+
+  it("takes the terms statement and the step's cta", () => {
+    expect(view!.consentStatement).toBe(CONTACT_FORM_TERMS_STATEMENT);
+    expect(view!.submitLabel).toBe("Send message");
+  });
+});
+
+describe("contactFormFromConfig — an owner's edit (AC-3)", () => {
+  it("renders a relabelled subject and a sixth option", () => {
+    const config = seeded();
+    const subject = firstStep(config).fields.find((f) => f.name === "subject")!;
+    subject.copy.label = { en: "Topic" };
+    subject.options = [...subject.options!, { value: "Podcast", label: { en: "Podcast" } }];
+
+    const view = contactFormFromConfig(config, "en")!;
+    const rendered = view.fields.find((f) => f.name === "subject")!;
+    expect(rendered.label).toBe("Topic");
+    expect(rendered.options).toHaveLength(6);
+  });
+
+  it("is null when the step has no name field", () => {
+    const config = seeded();
+    const step = firstStep(config);
+    step.fields = step.fields.filter((f) => f.name !== "name");
+    expect(contactFormFromConfig(config, "en")).toBeNull();
+  });
+
+  it("is null when the step has no email field", () => {
+    const config = seeded();
+    const step = firstStep(config);
+    step.fields = step.fields.filter((f) => f.name !== "email");
+    expect(contactFormFromConfig(config, "en")).toBeNull();
+  });
+
+  it("is null when the first step is not a field step", () => {
+    const config = seeded();
+    config.steps = [
+      {
+        key: "segment",
+        type: "segmentation",
+        copy: { title: { en: "Who are you?" } },
+        questions: [{ name: "role", options: [{ value: "a", label: { en: "A" } }] }],
+      },
+      ...config.steps,
+    ];
+    expect(contactFormFromConfig(config, "en")).toBeNull();
+  });
+
+  it("renders neither an address field nor a second consent field", () => {
+    const config = seeded();
+    const step = firstStep(config);
+    step.fields = [
+      ...step.fields,
+      { name: "where", inputType: "address", copy: { label: { en: "Address" } } },
+      {
+        name: "marketing",
+        inputType: "consent",
+        purposes: ["marketing"],
+        copy: { label: { en: "Send me news." } },
+      },
+    ] as FieldStep["fields"];
+
+    const view = contactFormFromConfig(config, "en")!;
+    expect(view.fields.map((f) => f.name)).toEqual(["name", "email", "subject", "message"]);
+    expect(view.consentStatement).toBe(CONTACT_FORM_TERMS_STATEMENT);
+  });
+
+  it("gives no statement when the step has no consent field", () => {
+    const config = seeded();
+    const step = firstStep(config);
+    step.fields = step.fields.filter((f) => f.inputType !== "consent");
+    expect(contactFormFromConfig(config, "en")!.consentStatement).toBeUndefined();
+  });
+
+  it("resolves copy for the active locale", () => {
+    const config = seeded();
+    firstStep(config).fields[0]!.copy.label = { en: "Name", fr: "Nom" };
+
+    expect(contactFormFromConfig(config, "fr")!.fields[0]!.label).toBe("Nom");
+    expect(contactFormFromConfig(config, "en")!.fields[0]!.label).toBe("Name");
+  });
+});

package/templates/apps/web/app/[locale]/contact/__tests__/contact-form-text.test.ts

@@ -4,6 +4,8 @@
  * the block to fill.
  */
 import messages from "../../../../messages/en.json";
+import { CONTACT_FORM_TERMS_STATEMENT } from "@working-theory/validation";
+
 import { contactFormText } from "../contact-form-text";
 
 /** A translator over the English catalog that interpolates `{name}` values, as ICU does. */
@@ -24,9 +26,24 @@ describe("contactFormText", () => {
       success: messages.contact.successMessage,
       genericError: messages.contact.genericError,
       consentStatement: messages.contact.consentStatement,
+      consentRequired: "Please accept the terms to send your message.",
       unavailableHeading: messages.contact.unavailableHeading,
       unavailableBody: "Email us at {email} and we'll reply.",
       unavailableNoEmail: messages.contact.unavailableNoEmail,
     });
   });
 });
+
+describe("the contact catalog (#8661 D9)", () => {
+  it("states the three-link terms statement the Contact form magnet seeds", () => {
+    expect(messages.contact.consentStatement).toBe(CONTACT_FORM_TERMS_STATEMENT);
+  });
+
+  it("carries a workingAgreement namespace in the terms namespace's shape", () => {
+    expect(messages.workingAgreement).toEqual({
+      heading: "Working Agreement",
+      emptyState: "Working agreement content coming soon.",
+    });
+    expect(Object.keys(messages.workingAgreement)).toEqual(Object.keys(messages.terms));
+  });
+});

package/templates/apps/web/app/[locale]/contact/__tests__/contact-magnet-page.test.tsx

@@ -0,0 +1,386 @@
+/**
+ * contact/page.tsx over the Contact form magnet (#8661 D6) — AC-3 and AC-5.
+ *
+ * Unlike `page-renderer-migration.test.tsx`, this suite renders the REAL
+ * `LeadCaptureForm` and binds the REAL `captureLeadAction`, so the hidden
+ * `source` input, the fields and a submit are all visible. Mocked
+ * boundaries: `@working-theory/api-client` (`flows.get`, `leads.captureStatus`,
+ * `leads.submit`), `next/headers`, `next-intl/server` (over the real English
+ * catalog), the `_site.mdx` contact-email read, and the page-renderer's
+ * content loaders (injected).
+ */
+import React from "react";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import {
+  CONTACT_FORM_TERMS_STATEMENT,
+  contactFormFlowConfig,
+  type FlowConfig,
+} from "@working-theory/validation";
+
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: jest.fn(() => {
+    throw new Error("NEXT_NOT_FOUND");
+  }),
+}));
+
+jest.mock("next-mdx-remote/rsc", () => ({
+  __esModule: true,
+  MDXRemote: ({ source }: { source: string }) =>
+    React.createElement("div", { "data-testid": "mdx-rendered" }, source),
+}));
+
+jest.mock("@working-theory/api-client", () => ({
+  flows: { get: jest.fn() },
+  leads: { captureStatus: jest.fn(), submit: jest.fn() },
+  visitorForwardHeaders: () => undefined,
+}));
+
+jest.mock("next/headers", () => ({
+  __esModule: true,
+  headers: jest.fn().mockResolvedValue({ get: () => null }),
+  cookies: jest.fn().mockResolvedValue({ get: () => undefined }),
+}));
+
+// The real English catalog, so the page's own strings render as they ship.
+jest.mock("next-intl/server", () => {
+  const messages = jest.requireActual("../../../../messages/en.json") as Record<
+    string,
+    Record<string, unknown>
+  >;
+  return {
+    getTranslations: async (arg: string | { namespace: string }) => {
+      const ns = messages[typeof arg === "string" ? arg : arg.namespace] ?? {};
+      return (key: string, values?: Record<string, string>) =>
+        String(ns[key] ?? key).replace(/\{(\w+)\}/g, (m, name: string) => values?.[name] ?? m);
+    },
+  };
+});
+
+// eslint-disable-next-line no-restricted-syntax -- test-seam mock: the real read is a node:fs frontmatter parse of content/_site.mdx; narrowest possible scope
+jest.mock("../site-contact-email", () => ({
+  readSiteContactEmail: jest.fn().mockReturnValue(undefined),
+}));
+
+import { flows, leads } from "@working-theory/api-client";
+import { localeHref } from "@working-theory/ui";
+
+import { contactFormFromConfig } from "../contact-form-magnet";
+import * as pageModule from "../page";
+import ContactPage from "../page";
+
+const mockFlowsGet = flows.get as jest.Mock;
+const mockCaptureStatus = leads.captureStatus as jest.Mock;
+const mockSubmit = leads.submit as jest.Mock;
+
+type FieldStep = Extract<FlowConfig["steps"][number], { type: "field" }>;
+
+const source = {
+  frontmatter: {
+    type: "ContactPage" as const,
+    slug: "contact",
+    title: "Contact Us",
+    description: "Get in touch.",
+  },
+  body: "",
+};
+
+/** The seeded config with its subject relabelled. */
+function configWithSubjectLabel(label: string): FlowConfig {
+  const config = JSON.parse(JSON.stringify(contactFormFlowConfig)) as FlowConfig;
+  const subject = (config.steps[0] as FieldStep).fields.find((f) => f.name === "subject")!;
+  subject.copy.label = { en: label };
+  return config;
+}
+
+const served = (config: FlowConfig) => ({ ok: true, status: 200, body: config });
+
+async function renderPage(sections: unknown[] = []) {
+  const element = await ContactPage({
+    params: Promise.resolve({ locale: "en" }),
+    getMdxSource: jest.fn().mockResolvedValue(source),
+    getPageSections: jest.fn().mockResolvedValue(sections),
+  });
+  return render(element);
+}
+
+function sourceInput(): HTMLInputElement | null {
+  return document.querySelector<HTMLInputElement>("input[name='source']");
+}
+
+function fieldNames(): string[] {
+  return Array.from(
+    screen.getByTestId("lead-capture-form").querySelectorAll<HTMLElement>("[data-testid^='field-']"),
+  ).map((el) => el.dataset.testid!.slice("field-".length));
+}
+
+async function tickAndSubmit(values: Record<string, string>) {
+  for (const [name, value] of Object.entries(values)) {
+    fireEvent.change(screen.getByTestId(`field-${name}`), { target: { value } });
+  }
+  fireEvent.click(screen.getByTestId("contact-consent"));
+  await act(async () => {
+    fireEvent.submit(screen.getByTestId("lead-capture-form"));
+  });
+}
+
+// #8731 — the page shares its two hub reads for a few seconds, per module
+// instance. Each test starts an hour later so none sees another's read.
+let clock = 1_800_000_000_000;
+const nowSpy = jest.spyOn(Date, "now");
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  clock += 60 * 60 * 1000;
+  nowSpy.mockImplementation(() => clock);
+  mockCaptureStatus.mockResolvedValue({
+    ok: true,
+    status: 200,
+    body: { ok: true, data: { contact: true, newsletter: false } },
+  });
+  mockSubmit.mockResolvedValue({ ok: true, body: { id: "lead_1", persisted: "db" } });
+});
+
+describe("contact/page — rendering (AC-3)", () => {
+  it("is rendered on every request, never ISR", () => {
+    expect(pageModule.dynamic).toBe("force-dynamic");
+    expect("revalidate" in pageModule).toBe(false);
+  });
+
+  it("renders the served magnet's fields, and stamps the post flow:contact", async () => {
+    mockFlowsGet.mockResolvedValue(served(configWithSubjectLabel("Topic")));
+
+    await renderPage();
+
+    expect(mockFlowsGet).toHaveBeenCalledWith("contact");
+    expect(fieldNames()).toEqual(["name", "email", "subject", "message"]);
+    expect(screen.getByTestId("lead-capture-form")).toHaveTextContent("Topic");
+    expect(sourceInput()).toHaveAttribute("type", "hidden");
+    expect(sourceInput()!.value).toBe("flow:contact");
+  });
+
+  it("the magnet wins over a content section's declared fields", async () => {
+    mockFlowsGet.mockResolvedValue(served(configWithSubjectLabel("Topic")));
+
+    await renderPage([
+      {
+        id: "contact-form",
+        type: "contact-form",
+        data: { fields: [{ name: "company", label: "Company", type: "text" }] },
+      },
+    ]);
+
+    expect(fieldNames()).toEqual(["name", "email", "subject", "message"]);
+    expect(screen.queryByTestId("field-company")).toBeNull();
+  });
+
+  it("a burst of views makes one hub read of each kind, not one per view (#8731)", async () => {
+    mockFlowsGet.mockResolvedValue(served(configWithSubjectLabel("Topic")));
+    for (let i = 0; i < 25; i += 1) {
+      const view = await renderPage();
+      expect(screen.getByTestId("lead-capture-form")).toHaveTextContent("Topic");
+      view.unmount();
+    }
+    expect(mockFlowsGet).toHaveBeenCalledTimes(1);
+    expect(mockCaptureStatus).toHaveBeenCalledTimes(1);
+  });
+
+  it("concurrent views share one in-flight read of each (#8731)", async () => {
+    mockFlowsGet.mockResolvedValue(served(contactFormFlowConfig));
+    await Promise.all([renderPage(), renderPage(), renderPage()]);
+    expect(mockFlowsGet).toHaveBeenCalledTimes(1);
+    expect(mockCaptureStatus).toHaveBeenCalledTimes(1);
+  });
+
+  it("an Admin edit shows once the shared read expires (#8731)", async () => {
+    mockFlowsGet.mockResolvedValueOnce(served(configWithSubjectLabel("Topic")));
+    const first = await renderPage();
+    expect(screen.getByTestId("lead-capture-form")).toHaveTextContent("Topic");
+    first.unmount();
+
+    mockFlowsGet.mockResolvedValueOnce(served(configWithSubjectLabel("Reason")));
+    clock += 60_000;
+    await renderPage();
+    const form = screen.getByTestId("lead-capture-form");
+    expect(form).toHaveTextContent("Reason");
+    expect(form).not.toHaveTextContent("Topic");
+    expect(mockFlowsGet).toHaveBeenCalledTimes(2);
+  });
+
+  it("a failed read is shared too, so an unreachable hub is not retried per view (#8731)", async () => {
+    mockFlowsGet.mockRejectedValue(new Error("hub down"));
+    mockCaptureStatus.mockRejectedValue(new Error("hub down"));
+    for (let i = 0; i < 5; i += 1) {
+      const view = await renderPage();
+      expect(screen.getByTestId("lead-capture-form")).toBeInTheDocument();
+      view.unmount();
+    }
+    expect(mockFlowsGet).toHaveBeenCalledTimes(1);
+    expect(mockCaptureStatus).toHaveBeenCalledTimes(1);
+  });
+
+  it("links Terms, Privacy Policy and Working Agreement in the statement", async () => {
+    mockFlowsGet.mockResolvedValue(served(contactFormFlowConfig));
+
+    await renderPage();
+
+    expect(screen.getByTestId("consent-policy-link-terms")).toHaveAttribute(
+      "href",
+      localeHref("en", "/terms"),
+    );
+    expect(screen.getByTestId("consent-policy-link-privacy")).toHaveAttribute(
+      "href",
+      localeHref("en", "/privacy"),
+    );
+    expect(screen.getByTestId("consent-policy-link-working_agreement")).toHaveAttribute(
+      "href",
+      localeHref("en", "/working-agreement"),
+    );
+  });
+
+  it("a magnet-driven post reaches leads.submit as flow:contact with its subject", async () => {
+    mockFlowsGet.mockResolvedValue(served(contactFormFlowConfig));
+
+    await renderPage();
+    await tickAndSubmit({ name: "Ada", email: "ada@example.com" });
+
+    await waitFor(() => expect(mockSubmit).toHaveBeenCalledTimes(1));
+    expect(mockSubmit.mock.calls[0][0]).toMatchObject({ source: "flow:contact" });
+  });
+});
+
+describe("contact/page — fallback (AC-5)", () => {
+  const builtIn = contactFormFromConfig(contactFormFlowConfig, "en")!;
+
+  it.each([
+    ["answers 404", () => mockFlowsGet.mockResolvedValue({ ok: false, status: 404, body: {} })],
+    ["rejects", () => mockFlowsGet.mockRejectedValue(new Error("ECONNREFUSED"))],
+    [
+      "serves a config the form cannot use",
+      () => {
+        const config = JSON.parse(JSON.stringify(contactFormFlowConfig)) as FlowConfig;
+        const step = config.steps[0] as FieldStep;
+        step.fields = step.fields.filter((f) => f.name !== "name");
+        mockFlowsGet.mockResolvedValue(served(config));
+      },
+    ],
+  ])("flows.get %s → the built-in form, posted as web", async (_label, arrange) => {
+    arrange();
+
+    await renderPage();
+
+    const form = screen.getByTestId("lead-capture-form");
+    expect(fieldNames()).toEqual(builtIn.fields.map((f) => f.name));
+    for (const field of builtIn.fields) expect(form).toHaveTextContent(field.label);
+    const subject = builtIn.fields.find((f) => f.name === "subject")!;
+    const native = form.querySelector("select");
+    if (native) {
+      const values = Array.from(native.querySelectorAll("option"))
+        .map((o) => o.value)
+        .filter(Boolean);
+      expect(values).toEqual(
+        subject.options!.map((o) => (typeof o === "string" ? o : o.value)),
+      );
+    }
+    expect(
+      document.getElementById("lead-capture-consent-statement")!.textContent,
+    ).toBe(CONTACT_FORM_TERMS_STATEMENT.replace(/\[([^\]]+)\]\([a-z_]+\)/g, "$1"));
+    expect(sourceInput()).toBeNull();
+
+    await tickAndSubmit({ name: "Ada", email: "ada@example.com" });
+
+    await waitFor(() => expect(mockSubmit).toHaveBeenCalledTimes(1));
+    expect(mockSubmit.mock.calls[0][0]).toMatchObject({ source: "contact-form" });
+  });
+
+  it("with no magnet, a section's declared fields still apply", async () => {
+    mockFlowsGet.mockResolvedValue({ ok: false, status: 404, body: {} });
+
+    await renderPage([
+      {
+        id: "contact-form",
+        type: "contact-form",
+        data: {
+          fields: [
+            { name: "name", label: "Name", type: "text" },
+            { name: "email", label: "Email", type: "email" },
+            { name: "company", label: "Company", type: "text" },
+          ],
+          submitLabel: "Request a demo",
+        },
+      },
+    ]);
+
+    expect(fieldNames()).toEqual(["name", "email", "company"]);
+    expect(screen.getByTestId("contact-submit")).toHaveTextContent("Request a demo");
+  });
+
+  it("the built-in form takes its labels from the contact catalog and the section's copy", async () => {
+    mockFlowsGet.mockResolvedValue({ ok: false, status: 404, body: {} });
+    const messages = jest.requireActual("../../../../messages/en.json") as {
+      contact: Record<string, string>;
+    };
+
+    await renderPage([
+      {
+        id: "contact-form",
+        type: "contact-form",
+        data: { fields: [], submitLabel: "Say hello", successMessage: "Got it, thanks." },
+      },
+    ]);
+
+    const form = screen.getByTestId("lead-capture-form");
+    expect(form).toHaveTextContent(messages.contact.nameLabel!);
+    expect(form).toHaveTextContent(messages.contact.messageLabel!);
+    expect(screen.getByTestId("contact-submit")).toHaveTextContent("Say hello");
+
+    await tickAndSubmit({ name: "Ada", email: "ada@example.com" });
+    await waitFor(() => expect(document.body).toHaveTextContent("Got it, thanks."));
+  });
+
+  it("a magnet's submit label wins, and the section's success message still applies", async () => {
+    mockFlowsGet.mockResolvedValue(served(contactFormFlowConfig));
+
+    await renderPage([
+      {
+        id: "contact-form",
+        type: "contact-form",
+        data: { fields: [], submitLabel: "Say hello", successMessage: "Got it, thanks." },
+      },
+    ]);
+
+    const form = screen.getByTestId("lead-capture-form");
+    expect(screen.getByTestId("contact-submit")).toHaveTextContent(
+      contactFormFromConfig(contactFormFlowConfig, "en")!.submitLabel!,
+    );
+
+    await tickAndSubmit({ name: "Ada", email: "ada@example.com" });
+    await waitFor(() => expect(document.body).toHaveTextContent("Got it, thanks."));
+  });
+});
+
+describe("contact/page — the column look (#8661 D12)", () => {
+  it("a column section gets the stacked look and an enabled Send", async () => {
+    mockFlowsGet.mockResolvedValue(served(contactFormFlowConfig));
+
+    await renderPage([
+      {
+        id: "contact",
+        type: "contact-form",
+        data: { variant: "column", headline: "Contact Us", description: "Say hello.", fields: [] },
+      },
+    ]);
+
+    expect(screen.getByTestId("lead-capture-form")).toHaveAttribute("data-look", "column");
+    expect(screen.getByTestId("contact-submit")).toBeEnabled();
+  });
+
+  it("a standard page keeps Send disabled until ticked", async () => {
+    mockFlowsGet.mockResolvedValue(served(contactFormFlowConfig));
+
+    await renderPage();
+
+    expect(screen.getByTestId("lead-capture-form")).not.toHaveAttribute("data-look");
+    expect(screen.getByTestId("contact-submit")).toBeDisabled();
+  });
+});