create-ailk 0.18.0 → 0.19.1

package/templates/apps/web/app/[locale]/(authed)/account/components/schedule-service.tsx

@@ -0,0 +1,276 @@
+"use client"; // reads meeting types and slots on demand and posts a controlled form
+
+/**
+ * ScheduleService — the New menu's Schedule service popup (#8233, spec D5,
+ * D8, D10; AC-MAA-10). On open it reads the meeting types the provider
+ * offers its clients (`readMeetingTypes`) and lists only those; picking one
+ * reads that type's open times for the next 14 days in the browser's time
+ * zone (`readSlots`, which computes the range on the server). Book posts the
+ * type, the slot's start as served, the time zone and optional notes to
+ * `member.book` — no name and no email: the server takes the verified email
+ * and the name from the session.
+ *
+ * With no type offered it says no times are offered and, when Send message
+ * is on the menu, offers to switch to it. A taken slot (`slot_unavailable`)
+ * re-reads the picked type's times and keeps the type and the notes; every
+ * other refusal shows its plain message with everything kept.
+ */
+
+import {
+  Button,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+  Text,
+  Textarea,
+} from "@working-theory/ui/primitives";
+import type { MemberMeetingType, SchedulingSlot } from "@working-theory/validation";
+import {
+  startTransition,
+  useActionState,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type FormEvent,
+  type ReactElement,
+} from "react";
+
+import { bookService, readMeetingTypes, readSlots, type NewActionState } from "../new-actions";
+import {
+  NewPopupRefusal,
+  NewPopupStatus,
+  useNewMenuPopup,
+  useOpenRead,
+  type NewPopupLabels,
+} from "../new-menu";
+
+export interface ScheduleServiceLabels extends NewPopupLabels {
+  service: string;
+  /** Carries a literal `{minutes}`, filled per type here. */
+  duration: string;
+  time: string;
+  notes: string;
+  submit: string;
+  none: string;
+  suggest: string;
+  noSlots: string;
+}
+
+export interface ScheduleServiceProps {
+  locale: string;
+  labels: ScheduleServiceLabels;
+}
+
+const SEND_MESSAGE = "send-message";
+
+export function ScheduleService({ locale, labels }: ScheduleServiceProps): ReactElement {
+  const popup = useNewMenuPopup();
+  const [read, retry] = useOpenRead(readMeetingTypes);
+  if (read === "loading" || read.kind === "error") {
+    return <NewPopupStatus failed={read !== "loading"} labels={labels} onRetry={retry} />;
+  }
+  if (read.items.length === 0) {
+    return (
+      <div className="flex flex-col gap-4" data-testid="new-schedule-none">
+        <Text as="p" variant="body-sm">
+          {labels.none}
+        </Text>
+        {popup.has(SEND_MESSAGE) ? (
+          <div>
+            <Button
+              variant="outline"
+              className="max-md:min-h-11"
+              onClick={() => popup.open(SEND_MESSAGE)}
+              data-testid="new-schedule-suggest"
+            >
+              {labels.suggest}
+            </Button>
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+  return <BookingForm types={read.items} locale={locale} labels={labels} />;
+}
+
+type Slots = { kind: "idle" | "loading" | "error" } | { kind: "ok"; slots: SchedulingSlot[] };
+
+function BookingForm({
+  types,
+  locale,
+  labels,
+}: {
+  types: readonly MemberMeetingType[];
+  locale: string;
+  labels: ScheduleServiceLabels;
+}): ReactElement {
+  const popup = useNewMenuPopup();
+  const id = useId();
+  const timeZone = useMemo(() => Intl.DateTimeFormat().resolvedOptions().timeZone, []);
+  const [slug, setSlug] = useState("");
+  const [start, setStart] = useState("");
+  const [notes, setNotes] = useState("");
+  const [slots, setSlots] = useState<Slots>({ kind: "idle" });
+  // Only the newest slots read lands: a quick second pick never shows the first's times.
+  const latestRead = useRef(0);
+
+  const loadSlots = (picked: string): void => {
+    const readId = ++latestRead.current;
+    setSlots({ kind: "loading" });
+    const land = (next: Slots): void => {
+      if (readId === latestRead.current) setSlots(next);
+    };
+    readSlots({ slug: picked, timeZone }).then(
+      (result) => land(result.kind === "ok" ? { kind: "ok", slots: result.slots } : { kind: "error" }),
+      () => land({ kind: "error" }),
+    );
+  };
+
+  const [state, dispatch, pending] = useActionState<NewActionState, FormData>(
+    async (prev, formData) => {
+      const next = await bookService(prev, formData);
+      if (next.kind === "success") popup.close(true);
+      if (next.kind === "error" && next.code === "slot_unavailable") {
+        const picked = formData.get("slug");
+        setStart("");
+        if (typeof picked === "string") loadSlots(picked);
+      }
+      return next;
+    },
+    { kind: "idle" },
+  );
+
+  const onSubmit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+    const formData = new FormData();
+    formData.set("slug", slug);
+    formData.set("start", start);
+    formData.set("timeZone", timeZone);
+    formData.set("notes", notes);
+    startTransition(() => dispatch(formData));
+  };
+
+  const dayFormat = new Intl.DateTimeFormat(locale, {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+    timeZone,
+  });
+  const timeFormat = new Intl.DateTimeFormat(locale, { timeStyle: "short", timeZone });
+  const days: { day: string; slots: { slot: SchedulingSlot; index: number }[] }[] = [];
+  if (slots.kind === "ok") {
+    slots.slots.forEach((slot, index) => {
+      const day = dayFormat.format(new Date(slot.start));
+      const last = days[days.length - 1];
+      if (last?.day === day) last.slots.push({ slot, index });
+      else days.push({ day, slots: [{ slot, index }] });
+    });
+  }
+
+  return (
+    <form onSubmit={onSubmit} className="flex flex-col gap-4" data-testid="new-schedule-form">
+      <div className="flex flex-col gap-2">
+        <Text as="p" id={`${id}-service`} variant="body-sm" className="font-semibold">
+          {labels.service}
+        </Text>
+        <RadioGroup
+          aria-labelledby={`${id}-service`}
+          value={slug}
+          onValueChange={(picked) => {
+            setSlug(picked);
+            setStart("");
+            loadSlots(picked);
+          }}
+        >
+          {types.map((type) => (
+            <div key={type.slug} className="flex min-h-11 items-center gap-3">
+              <RadioGroupItem
+                id={`${id}-type-${type.slug}`}
+                value={type.slug}
+                data-testid={`new-schedule-type-${type.slug}`}
+              />
+              <Label htmlFor={`${id}-type-${type.slug}`} className="flex flex-wrap gap-x-2">
+                {type.title}{" "}
+                <Text as="span" variant="caption">
+                  {labels.duration.replace("{minutes}", String(type.durationMinutes))}
+                </Text>
+              </Label>
+            </div>
+          ))}
+        </RadioGroup>
+      </div>
+
+      {slots.kind === "loading" || slots.kind === "error" ? (
+        <NewPopupStatus
+          failed={slots.kind === "error"}
+          labels={labels}
+          onRetry={() => loadSlots(slug)}
+        />
+      ) : null}
+      {slots.kind === "ok" && slots.slots.length === 0 ? (
+        <Text as="p" variant="body-sm" data-testid="new-schedule-no-slots">
+          {labels.noSlots}
+        </Text>
+      ) : null}
+      {days.length > 0 ? (
+        <div className="flex flex-col gap-2">
+          <Text as="p" id={`${id}-time`} variant="body-sm" className="font-semibold">
+            {labels.time}
+          </Text>
+          <RadioGroup aria-labelledby={`${id}-time`} value={start} onValueChange={setStart}>
+            {days.map(({ day, slots: daySlots }) => (
+              <div key={day} className="flex flex-col gap-1">
+                <Text as="p" variant="caption">
+                  {day}
+                </Text>
+                {daySlots.map(({ slot, index }) => (
+                  <div key={slot.start} className="flex min-h-11 items-center gap-3">
+                    <RadioGroupItem
+                      id={`${id}-slot-${index}`}
+                      value={slot.start}
+                      data-testid={`new-schedule-slot-${index}`}
+                    />
+                    <Label htmlFor={`${id}-slot-${index}`}>
+                      {timeFormat.format(new Date(slot.start))}
+                    </Label>
+                  </div>
+                ))}
+              </div>
+            ))}
+          </RadioGroup>
+        </div>
+      ) : null}
+
+      <div className="flex flex-col gap-2">
+        <div className="flex items-baseline gap-2">
+          <Label htmlFor={`${id}-notes`}>{labels.notes}</Label>
+          <Text as="span" variant="caption">
+            {labels.optional}
+          </Text>
+        </div>
+        <Textarea
+          id={`${id}-notes`}
+          name="notes"
+          rows={3}
+          value={notes}
+          onChange={(event) => setNotes(event.target.value)}
+          data-testid="new-schedule-notes"
+        />
+      </div>
+
+      {state.kind === "error" ? <NewPopupRefusal code={state.code} labels={labels} /> : null}
+      <div>
+        <Button
+          type="submit"
+          disabled={pending || slug === "" || start === ""}
+          // 44px on a phone (a touch-first context); the 36px primary from md up.
+          className="max-md:min-h-11"
+          data-testid="new-schedule-submit"
+        >
+          {pending ? labels.submitting : labels.submit}
+        </Button>
+      </div>
+    </form>
+  );
+}

package/templates/apps/web/app/[locale]/(authed)/account/components/send-message.tsx

@@ -0,0 +1,128 @@
+"use client"; // a controlled form posting through the New menu's server action
+
+/**
+ * SendMessage — the New menu's Send message popup (#8233, spec D9, D10): a
+ * subject, a body (line breaks kept) and an optional link, posted to
+ * `member.sendMessage` by `sendMessage` (`../new-actions.ts`). No name and no
+ * email: the server takes both from the session.
+ *
+ * Every field is controlled and the form posts what the state holds, so a
+ * refusal — a non-https link above all — shows its plain message with every
+ * typed value still in place. The link is sent as typed; the server's https
+ * rule is the only one. A success closes the popup and refreshes the Inbox.
+ */
+
+import { Button, Input, Label, Text, Textarea } from "@working-theory/ui/primitives";
+import { MESSAGE_BODY_MAX, MESSAGE_SUBJECT_MAX } from "@working-theory/validation";
+import {
+  startTransition,
+  useActionState,
+  useId,
+  useState,
+  type FormEvent,
+  type ReactElement,
+} from "react";
+
+import { sendMessage, type NewActionState } from "../new-actions";
+import { NewPopupRefusal, useNewMenuPopup, type NewPopupLabels } from "../new-menu";
+
+export interface SendMessageLabels extends NewPopupLabels {
+  subject: string;
+  body: string;
+  link: string;
+  linkHelp: string;
+  submit: string;
+}
+
+export interface SendMessageProps {
+  locale: string;
+  labels: SendMessageLabels;
+}
+
+export function SendMessage({ labels }: SendMessageProps): ReactElement {
+  const popup = useNewMenuPopup();
+  const id = useId();
+  const [subject, setSubject] = useState("");
+  const [body, setBody] = useState("");
+  const [link, setLink] = useState("");
+  const [state, dispatch, pending] = useActionState<NewActionState, FormData>(
+    async (prev, formData) => {
+      const next = await sendMessage(prev, formData);
+      if (next.kind === "success") popup.close(true);
+      return next;
+    },
+    { kind: "idle" },
+  );
+
+  const onSubmit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+    const formData = new FormData();
+    formData.set("subject", subject);
+    formData.set("body", body);
+    formData.set("link", link);
+    startTransition(() => dispatch(formData));
+  };
+
+  return (
+    <form onSubmit={onSubmit} className="flex flex-col gap-4" data-testid="new-message-form">
+      <div className="flex flex-col gap-2">
+        <Label htmlFor={`${id}-subject`}>{labels.subject}</Label>
+        <Input
+          id={`${id}-subject`}
+          name="subject"
+          value={subject}
+          maxLength={MESSAGE_SUBJECT_MAX}
+          required
+          onChange={(event) => setSubject(event.target.value)}
+          data-testid="new-message-subject"
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor={`${id}-body`}>{labels.body}</Label>
+        <Textarea
+          id={`${id}-body`}
+          name="body"
+          value={body}
+          rows={5}
+          maxLength={MESSAGE_BODY_MAX}
+          required
+          onChange={(event) => setBody(event.target.value)}
+          data-testid="new-message-body"
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <div className="flex items-baseline gap-2">
+          <Label htmlFor={`${id}-link`}>{labels.link}</Label>
+          <Text as="span" variant="caption">
+            {labels.optional}
+          </Text>
+        </div>
+        <Input
+          id={`${id}-link`}
+          name="link"
+          type="text"
+          inputMode="url"
+          value={link}
+          aria-describedby={`${id}-link-help`}
+          onChange={(event) => setLink(event.target.value)}
+          data-testid="new-message-link"
+        />
+        <Text as="p" id={`${id}-link-help`} variant="caption">
+          {labels.linkHelp}
+        </Text>
+      </div>
+      {state.kind === "error" ? <NewPopupRefusal code={state.code} labels={labels} /> : 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="new-message-submit"
+        >
+          {pending ? labels.submitting : labels.submit}
+        </Button>
+      </div>
+    </form>
+  );
+}

package/templates/apps/web/app/[locale]/(authed)/account/general/billing-anchor.tsx

@@ -0,0 +1,27 @@
+"use client"; // reads the URL fragment, which only the browser has
+
+/**
+ * BillingAnchor — forwards `/account/general#billing` to `/account/billing`
+ * (#8232, spec docs/specs/8232-member-settings-account-general-and-spec.md
+ * D8, C6).
+ *
+ * A URL fragment is never sent to the server, so `/account/settings` cannot
+ * redirect `#billing` itself: it redirects to `/account/general`, the browser
+ * carries the fragment across that redirect, and this part of General sends
+ * a `#billing` on to Billing. `#general`, or no fragment, stays on General.
+ * It renders nothing.
+ */
+
+import { localeHref } from "@working-theory/ui";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export function BillingAnchor({ locale }: { locale: string }): null {
+  const router = useRouter();
+  useEffect(() => {
+    if (window.location.hash === "#billing") {
+      router.replace(localeHref(locale, "/account/billing"));
+    }
+  }, [locale, router]);
+  return null;
+}

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

@@ -0,0 +1,81 @@
+"use server";
+
+/**
+ * general/contact-actions.ts — User settings › General's contact-details write
+ * (#8435, spec docs/specs/8435-contact-details-on-the-client-spec.md D13; the
+ * route is `PATCH /v1/member/profile/contact`).
+ *
+ * `saveContact` replaces the member's contact details on THIS site —
+ * `member.updateContact`, never the hub account's name and photo
+ * (`profile-actions.ts`'s `saveProfile` is that) and never another site's
+ * record. It sends `forwardedCookieInit()`'s init: on a single site the session
+ * cookie plus the request's `Origin`, which `apps/api`'s cookie CSRF check
+ * needs; on a hub-mode spoke the hub credential. It takes no identity
+ * argument — who comes from the forwarded credential alone.
+ *
+ * It answers `{ ok: true }` or a refusal `reason` the form maps to its own
+ * line: `telephone` (a number that is not E.164, `400 telephone_invalid`),
+ * `invalid` (any other refused body), `unverified` (`403`), `unavailable`
+ * (`404`, `503`, or `409 contact_unavailable` — a Person of that email held by
+ * another account), else `failed`. Logs carry a status or `err.name` only —
+ * never a name, a number, an address or an email.
+ *
+ * Not a `*.actions.ts` file and no `*Action`-suffixed export: the write has no
+ * MCP twin by decision (8435 D12), and apps/mcp's parity test reads that
+ * suffix.
+ */
+
+import { member } from "@working-theory/api-client";
+
+import { forwardedCookieInit } from "../../../../../lib/server-api";
+
+/** PII-safe error identity for logs (the `profile-actions.ts` idiom: `err.name` only). */
+function errorName(err: unknown): string {
+  return err instanceof Error ? err.name : "unknown";
+}
+
+/** The `error.code` of a member write's refusal body, when it has one. */
+function errorCode(body: unknown): string | null {
+  if (typeof body !== "object" || body === null) return null;
+  const error = (body as { error?: unknown }).error;
+  if (typeof error !== "object" || error === null) return null;
+  const code = (error as { code?: unknown }).code;
+  return typeof code === "string" ? code : null;
+}
+
+export type SaveContactResult =
+  | { ok: true }
+  | {
+      ok: false;
+      reason: "telephone" | "invalid" | "unverified" | "unavailable" | "failed";
+    };
+
+export async function saveContact(
+  input: Parameters<typeof member.updateContact>[0],
+): Promise<SaveContactResult> {
+  // Action input is untrusted: a hand-built call may send anything, and the
+  // API's own schema is the validator — a non-object is refused before any call.
+  if (typeof input !== "object" || input === null)
+    return { ok: false, reason: "invalid" };
+
+  try {
+    const res = await member.updateContact(input, await forwardedCookieInit());
+    if (res.ok) return { ok: true };
+    console.error(`[contact-actions] saveContact status=${res.status}`);
+    if (res.status === 400) {
+      return {
+        ok: false,
+        reason:
+          errorCode(res.body) === "telephone_invalid" ? "telephone" : "invalid",
+      };
+    }
+    if (res.status === 403) return { ok: false, reason: "unverified" };
+    if (res.status === 404 || res.status === 409 || res.status === 503) {
+      return { ok: false, reason: "unavailable" };
+    }
+    return { ok: false, reason: "failed" };
+  } catch (err) {
+    console.error(`[contact-actions] saveContact errName=${errorName(err)}`);
+    return { ok: false, reason: "failed" };
+  }
+}

package/templates/apps/web/app/[locale]/(authed)/account/general/deletion-request.tsx

@@ -0,0 +1,132 @@
+"use client"; // calls the deletion server action on click and shows the answer in place
+
+/**
+ * DeletionRequest — User settings › General › Privacy's "Request account
+ * deletion" (#8232, spec docs/specs/8232-member-settings-account-general-and-spec.md
+ * D5; roadmap D10, #8140 disposition 1).
+ *
+ * Moved here from `settings/deletion-request.tsx` (#7430) rather than edited
+ * in place (C3): `sync-routes` never overwrites a file a scaffold already
+ * has, so a synced General importing a changed copy would not compile.
+ *
+ * Who takes it is `via` (General's `loadProfileSource`, D3):
+ *
+ *   - `member` — the member API answers: Request calls the
+ *     `requestAccountDeletion` server action (`POST /v1/member/deletion-request`)
+ *     with an empty body, so the API's own subject and message go to the
+ *     operator. The API files it with the deployment that holds the account
+ *     and answers which operator that is; the success line follows that
+ *     answer, so nothing here tests the topology. An operator completes it —
+ *     nothing is deleted on click.
+ *   - `session` — a build with no member API: a pointer to Support, which
+ *     files into this site's own operator inbox.
+ *   - `none` — a hub-mode spoke whose hub answers no member route: the
+ *     unavailable line alone. No Support pointer, because Support on a spoke
+ *     files into the spoke's own inbox, and a request about a hub account
+ *     must never land there (SEC-7894-11).
+ */
+
+import { Button, InlineMessage, Link, Text } from "@working-theory/ui/primitives";
+import { useState, useTransition, type ReactElement } from "react";
+
+import { requestAccountDeletion, type AccountDeletionResult } from "../profile-actions";
+
+export interface DeletionRequestLabels {
+  lead: string;
+  action: string;
+  sentSite: string;
+  sentHub: string;
+  unverified: string;
+  unavailable: string;
+  error: string;
+  viaSupport: string;
+  supportLink: string;
+}
+
+export function DeletionRequest({
+  via,
+  supportHref,
+  labels,
+}: {
+  via: "member" | "session" | "none";
+  /** This site's own Support page (`/account/support`, localized). */
+  supportHref: string;
+  labels: DeletionRequestLabels;
+}): ReactElement {
+  const [result, setResult] = useState<AccountDeletionResult | null>(null);
+  const [pending, startTransition] = useTransition();
+
+  if (via === "none") {
+    return (
+      <div data-testid="account-deletion-unavailable">
+        <Text as="p" variant="body-sm" tone="muted">
+          {labels.unavailable}
+        </Text>
+      </div>
+    );
+  }
+
+  if (via === "session") {
+    return (
+      <div className="flex flex-col items-start gap-2">
+        <Text as="p" variant="body-sm" tone="muted">
+          {labels.viaSupport}
+        </Text>
+        <Link
+          href={supportHref}
+          className="inline-flex min-h-6 items-center"
+          data-testid="account-deletion-support"
+        >
+          {labels.supportLink}
+        </Link>
+      </div>
+    );
+  }
+
+  if (result?.ok) {
+    return (
+      <InlineMessage variant="success" role="status" className="text-body-sm">
+        {result.sentTo === "hub-operator" ? labels.sentHub : labels.sentSite}
+      </InlineMessage>
+    );
+  }
+
+  const error =
+    result === null
+      ? null
+      : result.reason === "unverified"
+        ? labels.unverified
+        : result.reason === "unavailable"
+          ? labels.unavailable
+          : labels.error;
+
+  return (
+    <div className="flex flex-col items-start gap-2">
+      <Text as="p" variant="body-sm" tone="muted">
+        {labels.lead}
+      </Text>
+      <Button
+        type="button"
+        variant="outline"
+        // #8339 D8 — the Admin's pill Save shape, now that deletion sits on
+        // the shared General composition's pane.
+        className="!h-11 md:!h-10 !rounded-full !px-5"
+        disabled={pending}
+        onClick={() => {
+          startTransition(async () => {
+            try {
+              setResult(await requestAccountDeletion());
+            } catch {
+              // A network failure throws rather than answering a reason.
+              setResult({ ok: false, reason: "failed" });
+            }
+          });
+        }}
+        data-testid="account-deletion-request"
+      >
+        {labels.action}
+      </Button>
+      {error !== null ? <InlineMessage variant="error">{error}</InlineMessage> : null}
+    </div>
+  );
+}