create-ailk 0.18.0 → 0.19.0

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/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>
+  );
+}

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

@@ -0,0 +1,131 @@
+/**
+ * /[locale]/account/general — User settings › General (#8339 D8; builds on
+ * #8232 D2).
+ *
+ * RSC, inside the account layout's SignedInShell with the rail visible, in
+ * the member's four-tab settings frame (D7). Renders the shared
+ * `AccountSettings` composition (@working-theory/templates/account, spec
+ * 8339 D4) — the same General form the Admin renders — through the client
+ * adapter `GeneralSettings` (`profile-form.tsx`). Below the form:
+ *
+ *   - Request account deletion (`DeletionRequest`, #8232 D5);
+ *   - any section a module contributes (`accountSettingsSections`);
+ *   - `BillingAnchor`, which forwards a `#billing` fragment to Billing.
+ *
+ * Sign-in moved to Security and cookie settings to Notifications (#8339
+ * C6) — General no longer renders either.
+ *
+ * Whether the profile and deletion go through the member API is
+ * `loadProfileSource` (D3), never a topology test here.
+ */
+
+import { AccountSettingsFrame, AccountSettingsPane } from "@working-theory/templates/account";
+import { localeHref } from "@working-theory/ui";
+import { Separator } from "@working-theory/ui/primitives";
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import type { ReactElement } from "react";
+
+import { accountSettingsSections } from "../../../../../lib/account-config";
+import { accountSession } from "../account-data";
+import { siteThemeModeCount } from "../settings/theme-modes";
+import { memberSettingsFrame, SettingsSection, type Translate } from "../settings-frame";
+
+import { BillingAnchor } from "./billing-anchor";
+import { DeletionRequest } from "./deletion-request";
+import { GeneralSettings } from "./profile-form";
+import { loadProfileSource } from "./profile-source";
+
+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("settings.general.title"), description: t("settings.general.lead") };
+}
+
+export default async function AccountGeneralPage({ 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; a session that expired between
+  // the layout and the page renders the pane's title alone.
+  if (!session) {
+    return (
+      <AccountSettingsFrame {...memberSettingsFrame(locale, t as unknown as Translate, "general")} name="">
+        <AccountSettingsPane
+          id="account-settings-general"
+          title={t("settings.general.title")}
+          lead={t("settings.general.lead")}
+        >
+          {null}
+        </AccountSettingsPane>
+      </AccountSettingsFrame>
+    );
+  }
+
+  const { ctx } = session;
+  const source = await loadProfileSource(ctx);
+
+  return (
+    <GeneralSettings
+      frame={memberSettingsFrame(locale, t as unknown as Translate, "general")}
+      user={{ name: ctx.user.name ?? "", email: ctx.user.email, image: source.image }}
+      labels={{
+        title: t("settings.general.title"),
+        lead: t("settings.general.lead"),
+        colorMode: t("settings.general.colorMode"),
+        light: t("settings.general.light"),
+        auto: t("settings.general.auto"),
+        dark: t("settings.general.dark"),
+        emailLabel: t("settings.general.email"),
+        nameLabel: t("settings.general.name"),
+        photoLabel: t("settings.general.photo"),
+        photoHint: t("settings.general.photoHint"),
+        photoPlaceholder: t("settings.general.photoPlaceholder"),
+        saveButton: t("settings.general.save"),
+        saving: t("settings.general.saving"),
+        saved: t("settings.general.saved"),
+        saveError: t("settings.general.saveError"),
+        nameRequired: t("settings.general.nameRequired"),
+        photoInvalid: t("settings.general.photoInvalid"),
+        unverified: t("settings.general.unverified"),
+        unavailable: t("settings.general.unavailable"),
+      }}
+      colorMode={
+        siteThemeModeCount() > 1
+          ? { cookieName: process.env.NEXT_PUBLIC_THEME_COOKIE_NAME ?? "ailk-theme" }
+          : null
+      }
+      via={source.via}
+    >
+      <Separator />
+      <div data-testid="account-deletion">
+        <DeletionRequest
+          via={source.via}
+          supportHref={localeHref(locale, "/account/support")}
+          labels={{
+            lead: t("settings.privacy.deletionLead"),
+            action: t("settings.privacy.deletion"),
+            sentSite: t("settings.privacy.deletionSentSite"),
+            sentHub: t("settings.privacy.deletionSentHub"),
+            unverified: t("settings.privacy.deletionUnverified"),
+            unavailable: t("settings.privacy.deletionUnavailable"),
+            error: t("settings.privacy.deletionError"),
+            viaSupport: t("settings.privacy.deletionViaSupport"),
+            supportLink: t("settings.privacy.deletionSupportLink"),
+          }}
+        />
+      </div>
+      {accountSettingsSections.map((section) => (
+        <SettingsSection key={section.id} id={section.id} title={ctx.t(section.title)}>
+          {section.render(ctx)}
+        </SettingsSection>
+      ))}
+      <BillingAnchor locale={locale} />
+    </GeneralSettings>
+  );
+}