create-ailk 0.19.1 → 0.20.0

package/templates/apps/web/app/[locale]/(authed)/account/onboarding/onboarding-form.tsx

@@ -0,0 +1,322 @@
+"use client"; // owns the answers' state and posts them through useActionState
+
+/**
+ * OnboardingForm — the client's onboarding questions (#8515, spec
+ * docs/specs/8515-standard-client-onboarding-diagnostic-and-spec.md D12).
+ *
+ * Renders every served step in order — the server checks every answer and
+ * evaluates no `showIf` (D9). A field step renders each field as `Input`
+ * (text, email, tel, url), `Textarea` or `Select`; a segmentation step renders
+ * each question as a `RadioGroup` (single choice) or one `Checkbox` per option
+ * (`multi`), labelled by the step's title. Copy is the provider's
+ * `LocalizedString`s, resolved for the form's `defaultLocale` (else its first
+ * locale) and rendered as text, never markup.
+ *
+ * Every control is named `answer.<name>` — a multi question's checkboxes
+ * repeat it. The form is controlled and posts what its state holds, so a
+ * refusal keeps every answer: one `answer.<name>` entry per value, plus a
+ * `multi` entry naming each multi question, so `submitOnboarding` sends a
+ * multi answer as an array even when one box is checked. A link is sent as
+ * typed (`inputMode="url"`, no browser URL check): the server's https rule
+ * is the only one. On success a status line replaces the form.
+ */
+
+import {
+  Button,
+  Checkbox,
+  Heading,
+  InlineMessage,
+  Input,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Text,
+  Textarea,
+} from "@working-theory/ui/primitives";
+import { resolveLocalizedString, type MemberOnboardingStep } from "@working-theory/validation";
+import {
+  startTransition,
+  useActionState,
+  useId,
+  useState,
+  type FormEvent,
+  type ReactElement,
+} from "react";
+
+import {
+  submitOnboarding,
+  type OnboardingErrorCode,
+  type OnboardingForm as OnboardingFormData,
+  type OnboardingState,
+} from "./actions";
+
+type FieldStep = Extract<MemberOnboardingStep, { type: "field" }>;
+type SegmentationStep = Extract<MemberOnboardingStep, { type: "segmentation" }>;
+type FormField = FieldStep["fields"][number];
+type Question = SegmentationStep["questions"][number];
+
+export interface OnboardingFormLabels {
+  optional: string;
+  submit: string;
+  submitting: string;
+  sent: string;
+  errors: Record<OnboardingErrorCode, string>;
+}
+
+export interface OnboardingFormProps {
+  form: OnboardingFormData;
+  labels: OnboardingFormLabels;
+}
+
+export function OnboardingForm({ form, labels }: OnboardingFormProps): ReactElement {
+  const id = useId();
+  const [answers, setAnswers] = useState<Record<string, string | string[]>>({});
+  const [state, dispatch, pending] = useActionState<OnboardingState, FormData>(
+    submitOnboarding,
+    { kind: "idle" },
+  );
+
+  if (state.kind === "sent") {
+    return (
+      <InlineMessage
+        variant="success"
+        role="status"
+        className="text-body-sm"
+        data-testid="account-onboarding-sent"
+      >
+        {labels.sent}
+      </InlineMessage>
+    );
+  }
+
+  const text = (value: Record<string, string>): string =>
+    resolveLocalizedString(value, form.defaultLocale, form.defaultLocale);
+  const setAnswer = (name: string, value: string | string[]): void =>
+    setAnswers((current) => ({ ...current, [name]: value }));
+  const single = (name: string): string => {
+    const value = answers[name];
+    return typeof value === "string" ? value : "";
+  };
+  const picked = (name: string): string[] => {
+    const value = answers[name];
+    return Array.isArray(value) ? value : [];
+  };
+
+  const onSubmit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+    const formData = new FormData();
+    for (const step of form.steps) {
+      if (step.type !== "segmentation") continue;
+      for (const question of step.questions) {
+        if (question.multi) formData.append("multi", question.name);
+      }
+    }
+    for (const [name, value] of Object.entries(answers)) {
+      for (const one of Array.isArray(value) ? value : [value]) {
+        formData.append(`answer.${name}`, one);
+      }
+    }
+    startTransition(() => dispatch(formData));
+  };
+
+  const renderField = (field: FormField): ReactElement => {
+    const controlId = `${id}-${field.name}`;
+    const helpId = `${controlId}-help`;
+    const help = field.copy.help ? text(field.copy.help) : null;
+    const placeholder = field.copy.placeholder ? text(field.copy.placeholder) : undefined;
+    const value = single(field.name);
+    const common = {
+      id: controlId,
+      name: `answer.${field.name}`,
+      required: field.required === true,
+      ...(help ? { "aria-describedby": helpId } : {}),
+      "data-testid": `account-onboarding-field-${field.name}`,
+    };
+    const onChange = (event: { target: { value: string } }): void =>
+      setAnswer(field.name, event.target.value);
+
+    let control: ReactElement;
+    if (field.inputType === "textarea") {
+      control = (
+        <Textarea {...common} rows={4} value={value} placeholder={placeholder} onChange={onChange} />
+      );
+    } else if (field.inputType === "select") {
+      control = (
+        <Select
+          name={common.name}
+          required={common.required}
+          value={value}
+          onValueChange={(next) => setAnswer(field.name, next)}
+        >
+          <SelectTrigger
+            id={controlId}
+            {...(help ? { "aria-describedby": helpId } : {})}
+            data-testid={common["data-testid"]}
+          >
+            <SelectValue {...(placeholder ? { placeholder } : {})} />
+          </SelectTrigger>
+          <SelectContent>
+            {(field.options ?? []).map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {text(option.label)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      );
+    } else {
+      control = (
+        <Input
+          {...common}
+          // A url field takes text: no browser URL check, so the server's plain refusal is the rule.
+          type={field.inputType === "url" ? "text" : field.inputType}
+          {...(field.inputType === "url" ? { inputMode: "url" as const } : {})}
+          value={value}
+          placeholder={placeholder}
+          onChange={onChange}
+        />
+      );
+    }
+
+    return (
+      <div key={field.name} className="flex flex-col gap-2">
+        <div className="flex items-baseline gap-2">
+          <Label htmlFor={controlId}>{text(field.copy.label)}</Label>
+          {field.required ? null : (
+            <Text as="span" variant="caption">
+              {labels.optional}
+            </Text>
+          )}
+        </div>
+        {control}
+        {help ? (
+          <Text as="p" id={helpId} variant="caption">
+            {help}
+          </Text>
+        ) : null}
+      </div>
+    );
+  };
+
+  /** One question, labelled by its step's title (`titleId`). */
+  const renderQuestion = (question: Question, titleId: string): ReactElement => {
+    const groupId = `${id}-${question.name}`;
+    const name = `answer.${question.name}`;
+    const optionId = (index: number): string => `${groupId}-${index}`;
+
+    if (!question.multi) {
+      return (
+        <RadioGroup
+          key={question.name}
+          aria-labelledby={titleId}
+          name={name}
+          required
+          value={single(question.name)}
+          onValueChange={(next) => setAnswer(question.name, next)}
+          data-testid={`account-onboarding-field-${question.name}`}
+        >
+          {question.options.map((option, index) => (
+            <div key={option.value} className="flex min-h-11 items-center gap-3">
+              <RadioGroupItem id={optionId(index)} value={option.value} />
+              <Label htmlFor={optionId(index)}>{text(option.label)}</Label>
+            </div>
+          ))}
+        </RadioGroup>
+      );
+    }
+
+    const exclusive = new Set(question.exclusiveValues ?? []);
+    const values = picked(question.name);
+    // A value in `exclusiveValues` stands alone (D9): checking it clears the
+    // others, and checking another clears it. Kept in the options' order.
+    const toggle = (value: string, checked: boolean): void => {
+      const next = new Set(
+        checked
+          ? exclusive.has(value)
+            ? [value]
+            : [...values.filter((v) => !exclusive.has(v)), value]
+          : values.filter((v) => v !== value),
+      );
+      setAnswer(
+        question.name,
+        question.options.map((o) => o.value).filter((v) => next.has(v)),
+      );
+    };
+    return (
+      <div
+        key={question.name}
+        role="group"
+        aria-labelledby={titleId}
+        className="flex flex-col"
+        data-testid={`account-onboarding-field-${question.name}`}
+      >
+        {question.options.map((option, index) => (
+          <div key={option.value} className="flex min-h-11 items-center gap-3">
+            <Checkbox
+              id={optionId(index)}
+              name={name}
+              value={option.value}
+              checked={values.includes(option.value)}
+              onCheckedChange={(checked) => toggle(option.value, checked === true)}
+            />
+            <Label htmlFor={optionId(index)}>{text(option.label)}</Label>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  /** A segmentation step: its title once, then each question it asks. */
+  const renderSegmentation = (step: SegmentationStep): ReactElement => {
+    const titleId = `${id}-${step.key}-title`;
+    return (
+      <div key={step.key} className="flex flex-col gap-2">
+        <Text as="p" id={titleId} variant="body-sm" className="font-semibold">
+          {text(step.copy.title)}
+        </Text>
+        {step.questions.map((question) => renderQuestion(question, titleId))}
+      </div>
+    );
+  };
+
+  return (
+    <form onSubmit={onSubmit} className="flex flex-col gap-6" data-testid="account-onboarding-form">
+      {form.steps.map((step) =>
+        step.type === "segmentation" ? (
+          renderSegmentation(step)
+        ) : (
+          <div key={step.key} className="flex flex-col gap-4">
+            {/* A one-field step's title is its field's label; a heading only when it groups several. */}
+            {step.fields.length > 1 ? (
+              <Heading level={2} visual={4}>
+                {text(step.copy.title)}
+              </Heading>
+            ) : null}
+            {step.fields.map(renderField)}
+          </div>
+        ),
+      )}
+      {state.kind === "error" ? (
+        <InlineMessage variant="error" className="text-body-sm" data-testid="account-onboarding-error">
+          {labels.errors[state.code]}
+        </InlineMessage>
+      ) : null}
+      <div>
+        <Button
+          type="submit"
+          disabled={pending}
+          // 44px on a phone (a touch-first context); the 36px primary from md up.
+          className="max-md:min-h-11"
+          data-testid="account-onboarding-submit"
+        >
+          {pending ? labels.submitting : labels.submit}
+        </Button>
+      </div>
+    </form>
+  );
+}

package/templates/apps/web/app/[locale]/(authed)/account/onboarding/page.tsx

@@ -0,0 +1,126 @@
+/**
+ * /[locale]/account/onboarding — the client's onboarding questions (#8515,
+ * spec docs/specs/8515-standard-client-onboarding-diagnostic-and-spec.md
+ * D12).
+ *
+ * RSC, inside the account layout's SignedInShell. Reached from the Open
+ * onboarding action on a message the business sent with Start onboarding
+ * (`lib/account-config.ts`, D6). It reads the workspace's standard
+ * onboarding magnet through `readOnboardingForm` (`GET /v1/member/onboarding`)
+ * and renders:
+ *
+ *   - the form's title and `OnboardingForm`, which posts the answers through
+ *     `submitOnboarding`;
+ *   - `form: null` — onboarding not open to this caller here (switched off,
+ *     not seeded, no Person, or no member area on this build) — a plain line
+ *     and a link back to the account;
+ *   - a failed read — the account area's error row with Retry (spec 7423
+ *     D12), never an empty page.
+ *
+ * Nothing here tests the topology: the read sends `forwardedCookieInit()`'s
+ * init, so the same file serves a single site and a hub-mode spoke.
+ */
+
+import { localeHref } from "@working-theory/ui";
+import { Heading, Link, Text } from "@working-theory/ui/primitives";
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import type { ReactElement } from "react";
+
+import { accountSession } from "../account-data";
+import { ErrorRow } from "../error-row";
+
+import { readOnboardingForm } from "./actions";
+import { OnboardingForm } from "./onboarding-form";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "account" });
+  return { title: t("onboarding.title") };
+}
+
+export default async function AccountOnboardingPage({ params }: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "account" });
+  const session = await accountSession(locale);
+
+  // Unreachable behind the (authed) gate — the layout renders the sign-in
+  // gate instead — but the page still renders in parallel with it, so a
+  // `notFound()` here would stream a 404 digest over the gate (the scaffold
+  // render sweep's `streamed not-found`, as `../artifacts/page.tsx` records).
+  // With no session: the heading alone, and nothing is read.
+  if (!session) {
+    return (
+      <div className="max-w-3xl py-8" data-testid="account-onboarding">
+        <Heading level={1} visual={2}>
+          {t("onboarding.title")}
+        </Heading>
+      </div>
+    );
+  }
+
+  const read = await readOnboardingForm();
+
+  if (read.kind === "error") {
+    return (
+      <div className="max-w-3xl py-8" data-testid="account-onboarding">
+        <Heading level={1} visual={2}>
+          {t("onboarding.title")}
+        </Heading>
+        <ErrorRow
+          className="mt-block-loose"
+          message={t("onboarding.errors.load")}
+          retryLabel={t("onboarding.retry")}
+        />
+      </div>
+    );
+  }
+
+  if (read.form === null) {
+    return (
+      <div className="max-w-3xl py-8" data-testid="account-onboarding">
+        <Heading level={1} visual={2}>
+          {t("onboarding.title")}
+        </Heading>
+        <div className="mt-block-tight" data-testid="account-onboarding-unavailable">
+          <Text as="p" variant="body-sm" tone="muted">
+            {t("onboarding.unavailable")}
+          </Text>
+        </div>
+        <Text as="p" variant="body-sm" className="mt-block-tight">
+          <Link href={localeHref(locale, "/account")} data-testid="account-onboarding-back">
+            {t("onboarding.back")}
+          </Link>
+        </Text>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex max-w-3xl flex-col gap-8 py-8" data-testid="account-onboarding">
+      <Heading level={1} visual={2}>
+        {read.form.title}
+      </Heading>
+      <OnboardingForm
+        form={read.form}
+        labels={{
+          optional: t("onboarding.optional"),
+          submit: t("onboarding.submit"),
+          submitting: t("onboarding.submitting"),
+          sent: t("onboarding.sent"),
+          errors: {
+            onboarding_off: t("onboarding.errors.onboardingOff"),
+            answers_invalid: t("onboarding.errors.answersInvalid"),
+            link_not_https: t("onboarding.errors.linkNotHttps"),
+            too_many_requests: t("onboarding.errors.tooManyRequests"),
+            failed: t("onboarding.errors.failed"),
+          },
+        }}
+      />
+    </div>
+  );
+}

package/templates/apps/web/app/[locale]/(authed)/account/page.tsx

@@ -41,6 +41,7 @@
  * drops its row and shows the error row too — a failed read is never silent.
  */
 
+import { member } from "@working-theory/api-client";
 import {
   ForYouPanel,
   InboxList,
@@ -62,6 +63,7 @@ import {
   logReadFailure,
   type LoadedInboxItem,
 } from "./account-data";
+import { AgreementsPrompt, type MissingAgreement } from "./agreements-prompt";
 import { ErrorRow } from "./error-row";
 import { ACCOUNT_PERSIST_KEY, forYouLabels } from "./for-you-labels";
 import { NewMenu, type NewMenuAction } from "./new-menu";
@@ -112,6 +114,33 @@ function scheduledOrder(rows: readonly LoadedInboxItem[]): LoadedInboxItem[] {
   return [...upcoming, ...rows.filter(({ item }) => item.upcoming !== true)];
 }
 
+/**
+ * #8438 D13 — the `signUp` agreements this caller's OWN state does not
+ * cover at their CURRENT registry version. A failed or absent read answers
+ * none: the prompt is a convenience, never a page-breaking requirement.
+ */
+async function loadMissingAgreements(ctx: AccountContext, locale: string): Promise<MissingAgreement[]> {
+  try {
+    const res = await member.consents(ctx.init, { locale });
+    if (!res.ok) return [];
+    return res.body.purposes
+      .filter((purpose) => purpose.signUp)
+      .filter(
+        (purpose) =>
+          !purpose.state || !purpose.state.granted || purpose.state.policyVersion !== purpose.policyVersion,
+      )
+      .map((purpose) => ({
+        id: purpose.id,
+        statement: purpose.statement,
+        policyHref: purpose.policyHref,
+        version: purpose.policyVersion,
+        hadPriorGrant: purpose.state !== null,
+      }));
+  } catch {
+    return [];
+  }
+}
+
 export default async function AccountInboxPage({ params }: Props): Promise<ReactElement> {
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: "account" });
@@ -119,16 +148,18 @@ export default async function AccountInboxPage({ params }: Props): Promise<React
 
   // The contract's translator, for keys that are data (a kind's `label`).
   const translate = session?.ctx.t ?? ((key: string): string => key);
-  const [inbox, forYou, newMenu] = session
+  const [inbox, forYou, newMenu, missingAgreements] = session
     ? await Promise.all([
         loadInboxItems(session.ctx),
         loadForYou(locale),
         loadNewActions(session.ctx),
+        loadMissingAgreements(session.ctx, locale),
       ])
     : [
         { items: [], failed: false },
         { items: [], failed: false, now: "" },
         { actions: [], failed: false },
+        [],
       ];
 
   const dateFormat = new Intl.DateTimeFormat(locale, {
@@ -158,6 +189,17 @@ export default async function AccountInboxPage({ params }: Props): Promise<React
   return (
     // The phone's top bar already clears the canvas — no top inset there.
     <div className="max-w-3xl py-8 max-md:pt-0" data-testid="account-inbox">
+      {/* #8438 D13 — the sign-up agreement re-ask, above both phone tabs. */}
+      <AgreementsPrompt
+        missing={missingAgreements}
+        labels={{
+          titleNew: t("agreements.titleNew"),
+          titleUpdated: t("agreements.titleUpdated"),
+          accept: t("agreements.accept"),
+          error: t("agreements.error"),
+          policyLink: t("settings.privacy.policyLink"),
+        }}
+      />
       {/* The page's one h1, on both phone tabs; visually hidden on the phone,
           which has no large title (§5.15). New sits beside it (#8233 D4). */}
       <div className="flex items-center justify-between gap-2">

package/templates/apps/web/app/[locale]/(authed)/account/privacy/actions.ts

@@ -0,0 +1,65 @@
+"use server";
+
+/**
+ * A/privacy/actions.ts — the member Privacy and Notifications tabs' one
+ * consent write path (#8438 D14, D15, spec
+ * docs/specs/8438-consent-registry-and-ledger-step-spec.md).
+ *
+ * `setConsentAction` posts one answer through `POST /v1/member/consents`
+ * (`member.setConsent`) and answers in `ConsentSwitchList`'s own shape, so
+ * both tabs' switch lists can call it directly with no adapter. The
+ * banner's visitor id (`ailk-vid`) rides along as `x-ailk-consent-visitor`
+ * when present, linking its cookie choices to the client record this write
+ * resolves or creates (D6, D11, D12) — never failing the write when it is
+ * absent or invalid.
+ */
+
+import { member } from "@working-theory/api-client";
+import type { ConsentSwitchChangeResult } from "@working-theory/templates/account";
+import { cookies } from "next/headers";
+import { getLocale, getTranslations } from "next-intl/server";
+
+import { consentVisitorHeader, readConsentVisitor } from "../../../../../lib/consent-visitor";
+import { forwardedCookieInit } from "../../../../../lib/server-api";
+
+function formatDate(iso: string, locale: string): string {
+  return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(new Date(iso));
+}
+
+export async function setConsentAction(
+  purposeId: string,
+  granted: boolean,
+): Promise<ConsentSwitchChangeResult> {
+  const [t, locale] = await Promise.all([
+    getTranslations("account"),
+    getLocale(),
+  ]);
+
+  try {
+    const base = await forwardedCookieInit();
+    let visitorHeaders: Record<string, string> = {};
+    try {
+      const visitorId = readConsentVisitor(await cookies());
+      if (visitorId) visitorHeaders = consentVisitorHeader(visitorId);
+    } catch {
+      // No request scope to read, or no visitor cookie — write with none.
+    }
+
+    const res = await member.setConsent(
+      { purposeId, granted, locale },
+      { headers: { ...base.headers, ...visitorHeaders } },
+    );
+    if (!res.ok) {
+      return { ok: false, message: t("settings.privacy.unavailable") };
+    }
+
+    const state = res.body.purpose.state;
+    const at = state?.at ?? new Date().toISOString();
+    const dateLine = state?.granted
+      ? t("settings.privacy.given", { date: formatDate(at, locale) })
+      : t("settings.privacy.withdrawn", { date: formatDate(at, locale) });
+    return { ok: true, dateLine };
+  } catch {
+    return { ok: false, message: t("settings.privacy.unavailable") };
+  }
+}