create-ailk 0.22.0 → 0.23.0

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

@@ -0,0 +1,189 @@
+/**
+ * /[locale]/careers/[slug]/apply on a site without the `signal-collectors`
+ * module — the Free apply page (#8849 D7). Lead capture is never-gate, so a
+ * posting takes an application on every tier.
+ *
+ * Where the module is present, its static `careers/[slug]/apply/page.tsx`
+ * (#8840 D11, the multi-step walk) wins over this dynamic segment — the
+ * `[slug]/[detail]` idiom. Every `action` but `apply` is a 404, so
+ * `/careers/<slug>/<anything else>` 404s as before. Core, owned by no module:
+ * it imports no `flows/` or module file.
+ *
+ * The segments are checked before any read (SEC-8849-A): `action` must be
+ * `apply` and `slug` must match the apply action's own slug rule, then the
+ * posting must exist. The form is the posting page's former `#apply` section,
+ * moved without change in behaviour (#8746 D1, D5): the workspace's Job
+ * application magnet's field step from `flows.get("job-application")` (the
+ * public flow read), else the built-in form, as the shared `LeadCaptureForm`
+ * bound to the apply action with the posting's slug as the lead's hidden
+ * `job`. When the API says this deployment accepts no lead, the page shows the
+ * site's contact email instead. Its two hub reads (capture status, the magnet)
+ * are shared across requests for 15 seconds per server instance, as
+ * /contact's are (#8731). Full-screen (`isMagnetWalkPath` matches the path),
+ * so it draws its own back arrow, and `noindex, follow` like the walk.
+ */
+import { flows, leads } from "@working-theory/api-client";
+import { flowRouteMetadata } from "@working-theory/metadata";
+import {
+  ContactFallback,
+  Container,
+  Heading,
+  LeadCaptureForm,
+  localeHref,
+} from "@working-theory/ui";
+import { NavBackLink } from "@working-theory/ui/chrome";
+import {
+  JOB_APPLICATION_FLOW_SLUG,
+  type FlowConfig,
+} from "@working-theory/validation";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import type { ReactElement } from "react";
+
+import { postingTitle } from "../../../../../lib/posting-title";
+import { contactFormText } from "../../../contact/contact-form-text";
+import { readSiteContactEmail } from "../../../contact/site-contact-email";
+import { captureLeadAction } from "../apply.actions";
+import {
+  jobApplicationFormFallback,
+  jobApplicationFormFromConfig,
+} from "../job-application-form";
+
+// #8746 D5 — the page is rendered on every request.
+export const dynamic = "force-dynamic";
+
+interface Props {
+  params: Promise<{ locale: string; slug: string; action: string }>;
+}
+
+/**
+ * `apply.actions.ts`'s slug rule, restated: a `"use server"` module may export
+ * only async functions.
+ */
+const POSTING_SLUG_RE = /^[a-z0-9][a-z0-9-]{0,127}$/;
+
+/** How long the two hub reads are shared across requests (/contact's #8731 value). */
+const HUB_READ_TTL_MS = 15_000;
+
+const hubReads = new Map<string, { at: number; read: Promise<unknown> }>();
+
+/**
+ * `read()`'s result, shared per instance for HUB_READ_TTL_MS; concurrent calls
+ * share one in-flight read, and a failed read (settled as its fallback) is
+ * shared the same way, so an unreachable hub is not retried per view.
+ */
+function sharedHubRead<T>(key: string, read: () => Promise<T>): Promise<T> {
+  const now = Date.now();
+  const hit = hubReads.get(key);
+  if (hit && now - hit.at < HUB_READ_TTL_MS) return hit.read as Promise<T>;
+  const fresh = read();
+  hubReads.set(key, { at: now, read: fresh });
+  return fresh;
+}
+
+/** Whether the API accepts a lead; any failed read counts as accepting (as /contact). */
+function readAccepting(): Promise<boolean> {
+  return sharedHubRead("capture-status", async () => {
+    try {
+      const res = await leads.captureStatus();
+      return res.ok && res.body.ok === true ? res.body.data.contact : true;
+    } catch {
+      return true;
+    }
+  });
+}
+
+/** The served Job application magnet's config, or `null` for any failed read. */
+function readJobApplicationMagnet(): Promise<FlowConfig | null> {
+  return sharedHubRead("job-application-magnet", async () => {
+    try {
+      const res = await flows.get(JOB_APPLICATION_FLOW_SLUG);
+      return res.ok ? res.body : null;
+    } catch {
+      return null;
+    }
+  });
+}
+
+/** The posting's title, or `null` for a segment pair this page does not serve. */
+async function titleFor(
+  slug: string,
+  action: string,
+  locale: string,
+): Promise<string | null> {
+  if (action !== "apply" || !POSTING_SLUG_RE.test(slug)) return null;
+  return postingTitle(slug, locale);
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale, slug, action } = await params;
+  const title = await titleFor(slug, action, locale);
+  return title === null ? flowRouteMetadata() : flowRouteMetadata({ title });
+}
+
+export default async function Page({ params }: Props): Promise<ReactElement> {
+  const { locale, slug, action } = await params;
+  const title = await titleFor(slug, action, locale);
+  if (title === null) notFound();
+
+  const [accepting, t, tCareers, tFlow, magnet] = await Promise.all([
+    readAccepting(),
+    getTranslations({ locale, namespace: "contact" }),
+    getTranslations({ locale, namespace: "careers" }),
+    getTranslations({ locale, namespace: "flow" }),
+    readJobApplicationMagnet(),
+  ]);
+  const text = contactFormText(t);
+  const contactEmail = readSiteContactEmail();
+  const view =
+    (magnet ? jobApplicationFormFromConfig(magnet, locale) : null) ??
+    jobApplicationFormFallback(locale);
+
+  return (
+    <main id="main" data-testid="job-apply">
+      <div className="px-control-x pt-control-y">
+        <NavBackLink
+          href={localeHref(locale, `/careers/${slug}`)}
+          label={tFlow("back")}
+        />
+      </div>
+      <Container className="py-section">
+        <div className="max-w-container-sm">
+          <Heading level={1} className="mb-block-tight">
+            {title}
+          </Heading>
+          {accepting ? (
+            <LeadCaptureForm
+              action={captureLeadAction.bind(null, slug)}
+              text={
+                view.consentStatement
+                  ? { ...text, consentStatement: view.consentStatement }
+                  : text
+              }
+              termsHref={localeHref(locale, "/terms")}
+              policies={{
+                terms: localeHref(locale, "/terms"),
+                privacy: localeHref(locale, "/privacy"),
+                working_agreement: localeHref(locale, "/working-agreement"),
+              }}
+              fallbackEmail={contactEmail}
+              fields={view.fields}
+              submitLabel={view.submitLabel}
+              successMessage={tCareers("applicationSuccess")}
+            />
+          ) : (
+            <ContactFallback
+              email={contactEmail}
+              text={{
+                heading: text.unavailableHeading,
+                body: text.unavailableBody,
+                noEmail: text.unavailableNoEmail,
+              }}
+            />
+          )}
+        </div>
+      </Container>
+    </main>
+  );
+}

package/templates/apps/web/app/[locale]/careers/[slug]/apply.actions.ts

@@ -21,7 +21,9 @@
  * them), and `job`. `name`, `job` and the read fields are spread after the
  * extras, so no form field overrides them. The write goes through the site's
  * lead writer (`src/lib/lead-write.ts`), which adds `payload.site` and
- * `payload.page` ("careers") and sends no `siteId`.
+ * `payload.page` ("careers") and sends no `siteId`. An accepted post tells
+ * the API so (`consent: true`, #9130): the hub requires it of a
+ * `flow:job-application` lead and records `payload.consent` itself.
  *
  * Checks, before any write: the honeypot (a filled one answers success and
  * sends nothing); first name, last name and email required; a LinkedIn URL,
@@ -281,7 +283,7 @@ export async function captureLeadAction(
   }
 
   const res = await writeLead(
-    { source: SOURCE, email, page: "careers", payload },
+    { source: SOURCE, email, page: "careers", consent: true, payload },
     init,
   );
   if (!res.ok) {

package/templates/apps/web/app/[locale]/careers/[slug]/job-application-form.ts

@@ -12,7 +12,9 @@
  * other field runs full width. `consent` and `address` fields are not
  * rendered: the block draws its own terms box, labelled with the step's first
  * `consent` field's label when it has one (as /contact does). The step's
- * `copy.title` heads the section and its `copy.cta` is the submit label.
+ * `copy.title` heads the section and its `copy.cta` is the submit label — or,
+ * when step 1 has none, the last field step's (#8840 D3: the two-step seed
+ * carries "Submit application" on step 2 only).
  *
  * Copy resolves with the one LocalizedString rule every flow surface shares
  * (`resolveLocalizedString`). Pure: no fetch, no React.
@@ -30,7 +32,7 @@ export interface JobApplicationFormView {
   fields: ContactFormField[];
   /** The step's first consent field's label — `[Label](key)` tokens intact. */
   consentStatement?: string;
-  /** The step's `copy.cta`. */
+  /** The step's `copy.cta`, else the last field step's (#8840 D3). */
   submitLabel?: string;
 }
 
@@ -96,13 +98,16 @@ export function jobApplicationFormFromConfig(
   }
 
   const consent = step.fields.find((f) => f.inputType === "consent");
+  const cta =
+    step.copy.cta ??
+    config.steps.filter((s): s is FieldStep => s.type === "field").at(-1)?.copy.cta;
   return {
     title: resolve(step.copy.title),
     fields,
     ...(consent !== undefined && {
       consentStatement: resolve(consent.copy.label),
     }),
-    ...(step.copy.cta !== undefined && { submitLabel: resolve(step.copy.cta) }),
+    ...(cta !== undefined && { submitLabel: resolve(cta) }),
   };
 }
 

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

@@ -2,99 +2,24 @@
 // next-mdx-remote/rsc, and emits a JSON-LD <script>. Unknown slugs 404 through renderPage.
 // Careers list at /careers links here; each job posting lives at /careers/<slug>.
 //
-// Under the posting, an `#apply` section (#8746 D1, D5) draws the workspace's
-// Job application magnet the way /contact draws its Contact form: the field
-// step of `flows.get("job-application")` (the public flow read — the API
-// resolves the workspace), else the built-in form, which is the seeded config
-// itself, for a magnet that is absent, off (draft), unreadable or unusable. It
-// is the shared `LeadCaptureForm` bound to this page's apply action with the
-// posting's slug as the lead's hidden `job`; a submission is a
-// `flow:job-application` lead. When the API says this deployment accepts no
-// lead, the section shows the site's contact email instead. The form's copy is
-// the `contact` catalog's, but for its success line, the `careers` catalog's
-// `applicationSuccess`. The page is rendered on every request, and its two hub
-// reads (capture status, the magnet) are shared across requests for 15 seconds
-// per server instance, as /contact's are (#8731): a burst of views is one hub
-// read of each, and an Admin edit shows within 15 seconds. An unknown posting
-// 404s before any read.
-import { flows, leads } from "@working-theory/api-client";
+// Under the posting, inside <main>, an Apply button (#8849 D8) opens
+// /careers/<slug>/apply — the multi-step walk where the `signal-collectors`
+// module is present (#8840 D11), else the Free apply page,
+// careers/[slug]/[action] (#8849 D7), which draws the one-step application
+// form this page used to draw under `#apply`. The posting's JSON-LD
+// ApplyAction targets the same URL (#8849 D3). The page makes no hub read.
 import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
 import { renderPage, renderPageMetadata } from "@working-theory/page-renderer";
-import {
-  ContactFallback,
-  Container,
-  Heading,
-  LeadCaptureForm,
-  localeHref,
-} from "@working-theory/ui";
-import {
-  JOB_APPLICATION_FLOW_SLUG,
-  type FlowConfig,
-} from "@working-theory/validation";
+import { Button, Container, Link, localeHref } from "@working-theory/ui";
 import type { Metadata } from "next";
 import { getTranslations } from "next-intl/server";
 import type { ReactElement } from "react";
 
-import { contactFormText } from "../../contact/contact-form-text";
-import { readSiteContactEmail } from "../../contact/site-contact-email";
-
-import { captureLeadAction } from "./apply.actions";
-import {
-  jobApplicationFormFallback,
-  jobApplicationFormFromConfig,
-} from "./job-application-form";
-
-// #8746 D5 — the page is rendered on every request.
-export const dynamic = "force-dynamic";
-
 interface Props {
   params: Promise<{ locale: string; slug: string }>;
   getMdxSource?: typeof defaultGetMdxSource;
 }
 
-/** How long the two hub reads are shared across requests (/contact's #8731 value). */
-const HUB_READ_TTL_MS = 15_000;
-
-const hubReads = new Map<string, { at: number; read: Promise<unknown> }>();
-
-/**
- * `read()`'s result, shared per instance for HUB_READ_TTL_MS; concurrent calls
- * share one in-flight read, and a failed read (settled as its fallback) is
- * shared the same way, so an unreachable hub is not retried per view.
- */
-function sharedHubRead<T>(key: string, read: () => Promise<T>): Promise<T> {
-  const now = Date.now();
-  const hit = hubReads.get(key);
-  if (hit && now - hit.at < HUB_READ_TTL_MS) return hit.read as Promise<T>;
-  const fresh = read();
-  hubReads.set(key, { at: now, read: fresh });
-  return fresh;
-}
-
-/** Whether the API accepts a lead; any failed read counts as accepting (as /contact). */
-function readAccepting(): Promise<boolean> {
-  return sharedHubRead("capture-status", async () => {
-    try {
-      const res = await leads.captureStatus();
-      return res.ok && res.body.ok === true ? res.body.data.contact : true;
-    } catch {
-      return true;
-    }
-  });
-}
-
-/** The served Job application magnet's config, or `null` for any failed read. */
-function readJobApplicationMagnet(): Promise<FlowConfig | null> {
-  return sharedHubRead("job-application-magnet", async () => {
-    try {
-      const res = await flows.get(JOB_APPLICATION_FLOW_SLUG);
-      return res.ok ? res.body : null;
-    } catch {
-      return null;
-    }
-  });
-}
-
 export async function generateMetadata({
   params,
 }: Pick<Props, "params">): Promise<Metadata> {
@@ -107,72 +32,25 @@ export default async function Page({
   getMdxSource,
 }: Props): Promise<ReactElement> {
   const { locale, slug } = await params;
-  const rendered = await renderPage({
+  const t = await getTranslations({ locale, namespace: "careers" });
+  return renderPage({
     type: "JobPosting",
     slug,
     locale,
     bodyMode: "mdx-body",
+    trailing: (
+      <Container className="pb-section">
+        <Button asChild size="big">
+          <Link
+            href={localeHref(locale, `/careers/${slug}/apply`)}
+            variant="bare"
+            data-testid="job-apply-cta"
+          >
+            {t("apply")}
+          </Link>
+        </Button>
+      </Container>
+    ),
     ...(getMdxSource !== undefined && { getMdxSource }),
   });
-
-  const [accepting, t, tCareers, magnet] = await Promise.all([
-    readAccepting(),
-    getTranslations({ locale, namespace: "contact" }),
-    getTranslations({ locale, namespace: "careers" }),
-    readJobApplicationMagnet(),
-  ]);
-  const text = contactFormText(t);
-  const contactEmail = readSiteContactEmail();
-  const view =
-    (magnet ? jobApplicationFormFromConfig(magnet, locale) : null) ??
-    jobApplicationFormFallback(locale);
-
-  return (
-    <>
-      {rendered}
-      <section
-        id="apply"
-        aria-labelledby="apply-heading"
-        className="scroll-mt-24"
-        data-testid="job-apply"
-      >
-        <Container className="pb-section">
-          <div className="max-w-container-sm">
-            <Heading level={2} id="apply-heading" className="mb-block-tight">
-              {view.title}
-            </Heading>
-            {accepting ? (
-              <LeadCaptureForm
-                action={captureLeadAction.bind(null, slug)}
-                text={
-                  view.consentStatement
-                    ? { ...text, consentStatement: view.consentStatement }
-                    : text
-                }
-                termsHref={localeHref(locale, "/terms")}
-                policies={{
-                  terms: localeHref(locale, "/terms"),
-                  privacy: localeHref(locale, "/privacy"),
-                  working_agreement: localeHref(locale, "/working-agreement"),
-                }}
-                fallbackEmail={contactEmail}
-                fields={view.fields}
-                submitLabel={view.submitLabel}
-                successMessage={tCareers("applicationSuccess")}
-              />
-            ) : (
-              <ContactFallback
-                email={contactEmail}
-                text={{
-                  heading: text.unavailableHeading,
-                  body: text.unavailableBody,
-                  noEmail: text.unavailableNoEmail,
-                }}
-              />
-            )}
-          </div>
-        </Container>
-      </section>
-    </>
-  );
 }

package/templates/apps/web/app/[locale]/careers/__tests__/apply.actions.test.ts

@@ -58,6 +58,7 @@ const VALID = {
 type SubmitBody = {
   source: string;
   email: string;
+  consent?: boolean;
   payload: Record<string, unknown>;
 };
 const submitted = (): SubmitBody => mockSubmit.mock.calls[0][0] as SubmitBody;
@@ -97,6 +98,14 @@ describe("captureLeadAction on a job page (#8746 AC-5)", () => {
     expect(body).not.toHaveProperty("siteId");
   });
 
+  it("sends the accepted terms as the body's top-level consent: true, never inside payload (#9130)", async () => {
+    await captureLeadAction(JOB, null, form(VALID));
+
+    const body = submitted();
+    expect(body.consent).toBe(true);
+    expect(body.payload).not.toHaveProperty("consent");
+  });
+
   it("carries phone and a LinkedIn URL, a bare domain gaining https://", async () => {
     await captureLeadAction(
       JOB,

package/templates/apps/web/app/[locale]/careers/__tests__/careers-hub.test.tsx

@@ -0,0 +1,172 @@
+/**
+ * /careers in sections mode (#8849 D10, AC-4): one generated `items` section
+ * from the JobPosting records, first, searchable and filterable by employment
+ * type and location, the facets read from the postings' first-class
+ * frontmatter fields.
+ *
+ * `renderPage` is spied on, so each case reads the input the page hands it and
+ * resolves the sections through the page's own `getPageSections`.
+ */
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import * as pageRenderer from "@working-theory/page-renderer";
+
+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),
+}));
+
+import CareersPage from "../page";
+
+type Input = Parameters<typeof pageRenderer.renderPage>[0];
+type Section = Awaited<ReturnType<typeof pageRenderer.getPageSections>>[number];
+type GetMdxSource = typeof pageRenderer.getMdxSource;
+type Source = NonNullable<Awaited<ReturnType<GetMdxSource>>>;
+type Frontmatter = Source["frontmatter"];
+
+const SEED: Source = {
+  frontmatter: {
+    type: "CareersList",
+    slug: "careers",
+    title: "Careers",
+    description: "Open roles.",
+  },
+  body: "",
+};
+
+const HOW_WE_WORK: Section = {
+  type: "content-block",
+  id: "how-we-work",
+  data: { headline: "How we work", body: "Async." },
+};
+
+const POSTINGS: Record<string, Frontmatter> = {
+  writer: {
+    type: "JobPosting",
+    slug: "writer",
+    title: "Writer",
+    description: "Write for us.",
+    employmentType: "FULL_TIME",
+    remote: true,
+    location: "Remote (US)",
+    publishedAt: "2026-10-01",
+  },
+  editor: {
+    type: "JobPosting",
+    slug: "editor",
+    title: "Editor",
+    description: "Edit for us.",
+    employmentType: "PART_TIME",
+    location: "Austin, TX",
+    publishedAt: "2026-09-01",
+  },
+};
+
+function sourceFor(postings: Record<string, Frontmatter>) {
+  return jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>(
+    async (type, slug) => {
+      if (type === "CareersList") return SEED;
+      const frontmatter = postings[slug];
+      return frontmatter ? { frontmatter, body: "" } : null;
+    },
+  );
+}
+
+/** Render /careers and return renderPage's input and its resolved sections. */
+async function renderHub(
+  slugs: string[],
+  postings: Record<string, Frontmatter> = POSTINGS,
+): Promise<{ input: Input; sections: Section[] }> {
+  const spy = jest.spyOn(pageRenderer, "renderPage");
+  await CareersPage({
+    params: Promise.resolve({ locale: "en" }),
+    getMdxSource: sourceFor(postings),
+    getMdxSlugs: jest.fn().mockResolvedValue(slugs),
+    getPageSections: jest.fn().mockResolvedValue([HOW_WE_WORK]),
+  });
+  const input = spy.mock.calls[0]![0];
+  spy.mockRestore();
+  const sections = await input.getPageSections!(SEED.frontmatter);
+  return { input, sections };
+}
+
+/** The generated section's data, narrowed to the `items` shape. */
+function generated(sections: Section[]) {
+  const first = sections[0]!;
+  if (first.type !== "items") throw new Error(`expected items, got ${first.type}`);
+  return first.data;
+}
+
+describe("/careers renders the generated, filterable grid (#8849 D10, AC-4)", () => {
+  it("renders in sections mode, the generated section first", async () => {
+    const { input, sections } = await renderHub(["editor", "writer"]);
+    expect(input.bodyMode).toBeUndefined();
+    expect(input.translationsNamespace).toBe("careers");
+    expect(sections.map((section) => section.id)).toEqual([
+      "open-positions",
+      "how-we-work",
+    ]);
+    expect(sections[0]!.type).toBe("items");
+  });
+
+  it("builds one card per posting, newest first, with the facets from the frontmatter", async () => {
+    const { sections } = await renderHub(["editor", "writer"]);
+    const data = generated(sections);
+    expect(data.items.map((item) => item.title)).toEqual(["Writer", "Editor"]);
+    expect(data.items.map((item) => item.eyebrow)).toEqual([
+      "Full-time · Remote (US)",
+      "Part-time · Austin, TX",
+    ]);
+    expect(data.items.map((item) => item.link?.href)).toEqual([
+      "/careers/writer",
+      "/careers/editor",
+    ]);
+    expect(data.items.map((item) => item.facets)).toEqual([
+      { type: "Full-time", location: "Remote (US)" },
+      { type: "Part-time", location: "Austin, TX" },
+    ]);
+    expect(data.filter?.facets?.map((facet) => facet.key)).toEqual([
+      "type",
+      "location",
+    ]);
+    expect(data.filter?.countText.other).toBe("{count} open positions");
+  });
+
+  it("reads no facet from schema.mainEntity", async () => {
+    const { sections } = await renderHub(["override"], {
+      override: {
+        type: "JobPosting",
+        slug: "override",
+        title: "Override",
+        description: "Typed only in the override.",
+        schema: { mainEntity: { employmentType: "FULL_TIME" } },
+      },
+    });
+    const item = generated(sections).items[0]!;
+    expect(item.facets).toBeUndefined();
+    expect(item.eyebrow).toBeUndefined();
+  });
+
+  it("with no postings, renders the declared sections alone", async () => {
+    const { sections } = await renderHub([]);
+    expect(sections.map((section) => section.id)).toEqual(["how-we-work"]);
+  });
+
+  it("with no seed, renders the careers empty state", async () => {
+    const element = await CareersPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: jest.fn().mockResolvedValue(null),
+      getMdxSlugs: jest.fn().mockResolvedValue(["writer"]),
+    });
+    render(element);
+    expect(screen.getByTestId("section-empty-state")).toBeTruthy();
+  });
+});