create-ailk 0.17.0 → 0.19.0

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

@@ -0,0 +1,172 @@
+/**
+ * /[locale]/account/billing — User settings › Billing (#8339 D8; builds on
+ * #8232 D9, AC-MAA-19).
+ *
+ * RSC, inside the account layout's SignedInShell with the rail visible, in
+ * the member's four-tab settings frame (D7). Lays out like the Admin's
+ * organization Billing page (`OrgBillingPanel`'s `current-plan` layout):
+ * the shared `CurrentPlanCard` (@working-theory/templates/account, spec
+ * 8339 D5), by `loadBilling()`'s answer (`billing-source.ts`, the billing
+ * topology seam):
+ *
+ *   - a subscription — the plan (or `unnamedPlan`), the status plus when
+ *     access ends (when set, C4 — `subscription.me` carries no price), the
+ *     card on file, then Manage in Stripe when a portal is available;
+ *   - no subscription — the same card shape with the plain line and no
+ *     button (C5);
+ *   - a failed read — the area's error row with Retry, never a false "you
+ *     have no subscription".
+ *
+ * After any of the three, one plain line when some of the member's billing
+ * is on a Stripe account this spoke's key cannot read (#8217 D12), then
+ * each section a module contributes (`accountBillingSections`, #8231 D4).
+ */
+
+import { AccountSettingsFrame, AccountSettingsPane, CurrentPlanCard } from "@working-theory/templates/account";
+import { Button, Text } from "@working-theory/ui/primitives";
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import type { ReactElement } from "react";
+
+import { accountBillingSections } from "../../../../../lib/account-config";
+import { accountSession } from "../account-data";
+import { openBillingPortal } from "../actions";
+import { type BillingState, loadBilling } from "../billing-source";
+import { ErrorRow } from "../error-row";
+import { memberSettingsFrame, SettingsSection, type Translate as MemberTranslate } from "../settings-frame";
+
+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.billing.title"), description: t("settings.billing.lead") };
+}
+
+/** The statuses with a message key; any other renders as the API sent it. */
+const KNOWN_STATUSES: ReadonlySet<string> = new Set(["trialing", "active", "past_due", "canceled"]);
+
+type Translate = Awaited<ReturnType<typeof getTranslations<"account">>>;
+
+function Subscription({
+  state,
+  locale,
+  t,
+}: {
+  state: Extract<BillingState, { kind: "subscription" }>;
+  locale: string;
+  t: Translate;
+}): ReactElement {
+  const card = state.paymentMethod;
+  const statusLabel = KNOWN_STATUSES.has(state.status)
+    ? t(`settings.billing.statuses.${state.status}`)
+    : state.status;
+  const line = (
+    <span data-testid="account-billing-status">
+      {state.accessRevokesAt
+        ? `${statusLabel} · ${t("settings.billing.accessEnds", {
+            date: new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(
+              new Date(state.accessRevokesAt),
+            ),
+          })}`
+        : statusLabel}
+    </span>
+  );
+  const caption = (
+    <span data-testid="account-billing-payment">
+      {card !== null
+        ? t("settings.billing.card", {
+            brand: card.brand,
+            last4: card.last4,
+            month: String(card.expMonth).padStart(2, "0"),
+            year: String(card.expYear),
+          })
+        : t("settings.billing.noCard")}
+    </span>
+  );
+  return (
+    <CurrentPlanCard
+      title={t("settings.billing.currentPlan")}
+      heading={
+        <span data-testid="account-billing-plan">
+          {state.planName ?? t("settings.billing.unnamedPlan")}
+        </span>
+      }
+      line={line}
+      caption={caption}
+      action={
+        state.portalAvailable ? (
+          <form action={openBillingPortal}>
+            <Button type="submit" variant="outline" data-testid="account-billing-manage">
+              {t("settings.billing.manage")}
+            </Button>
+          </form>
+        ) : undefined
+      }
+      testId="account-billing"
+      cardTestId="account-billing-card"
+    />
+  );
+}
+
+export default async function AccountBillingPage({ params }: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "account" });
+  const session = await accountSession(locale);
+  const frame = memberSettingsFrame(locale, t as unknown as MemberTranslate, "billing");
+
+  // 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 {...frame} name="">
+        <AccountSettingsPane id="account-settings-billing" title={t("settings.billing.title")} lead="">
+          {null}
+        </AccountSettingsPane>
+      </AccountSettingsFrame>
+    );
+  }
+
+  const { ctx } = session;
+  const state = await loadBilling(ctx.init);
+  const name = ctx.user.name || ctx.user.email;
+
+  return (
+    <AccountSettingsFrame {...frame} name={name}>
+      <AccountSettingsPane
+        id="account-settings-billing"
+        title={t("settings.billing.title")}
+        lead={t("settings.billing.lead")}
+      >
+        {state.kind === "subscription" ? (
+          <Subscription state={state} locale={locale} t={t} />
+        ) : state.kind === "none" ? (
+          <CurrentPlanCard
+            title={t("settings.billing.currentPlan")}
+            line={<span data-testid="account-billing-none">{t("settings.billing.none")}</span>}
+            testId="account-billing"
+            cardTestId="account-billing-card"
+          />
+        ) : (
+          <ErrorRow message={t("settings.billing.unavailable")} retryLabel={t("inbox.retry")} />
+        )}
+
+        {state.kind !== "failed" && state.unreadable ? (
+          <div data-testid="account-billing-unreadable">
+            <Text as="p" variant="body-sm" tone="muted">
+              {t("settings.billing.unreadable")}
+            </Text>
+          </div>
+        ) : null}
+
+        {accountBillingSections.map((section) => (
+          <SettingsSection key={section.id} id={section.id} title={ctx.t(section.title)}>
+            {section.render(ctx)}
+          </SettingsSection>
+        ))}
+      </AccountSettingsPane>
+    </AccountSettingsFrame>
+  );
+}

package/templates/apps/web/app/[locale]/(authed)/account/billing-source.ts

@@ -0,0 +1,147 @@
+/**
+ * account/billing-source.ts (server code) — what User settings › Billing
+ * shows (#8232, spec docs/specs/8232-member-settings-account-general-and-spec.md
+ * D9).
+ *
+ * One of the account tree's TWO topology seams (roadmap D1; the other is
+ * `sign-in-method.ts`): no other file under the account tree tests
+ * `SIGN_IN_PROVIDER`, `TOPOLOGY` or `SIGN_IN_ENABLED`.
+ *
+ *   - On a spoke that signs in through its hub, the spoke's own billing
+ *     (#8217 D10): `loadSpokeBilling()` from the generated seam, which
+ *     reaches the rendered `billing/spoke-billing.action.ts` on a spoke that
+ *     carries commerce and resolves `null` on one that does not — then
+ *     `none` with no call. The hub admits no subscription read for a hub credential
+ *     (roadmap D11), and this file imports nothing from the checkout package:
+ *     the action reads the vouched customer ids itself.
+ *   - Otherwise `subscription.me(init, { include: "billing" })` — the plan
+ *     name and the card summary are #8171's additive fields:
+ *       - 401, 403 or 404 (the commerce-disabled build answers 404), or a
+ *         2xx whose `status` is `null` ⇒ `none` — the caller has no
+ *         subscription (C9);
+ *       - any other non-2xx, or a throw ⇒ `failed`, logged with the status
+ *         or `err.name` — the page shows the error row with Retry, never a
+ *         false "you have no subscription";
+ *       - otherwise `subscription`, absent optional fields read as `null`.
+ *
+ * `billingPortalUrl()` is the one place a portal URL is minted, for
+ * `openBillingPortal` (`actions.ts`): the spoke's own key through the same
+ * loader on a hub-mode spoke, else the hub's portal route. `null` means no
+ * portal — the action then redirects nowhere.
+ */
+
+import {
+  subscription,
+  type SubscriptionLifecycleStatus,
+  type SubscriptionPaymentMethod,
+} from "@working-theory/api-client";
+
+import { forwardedCookieInit } from "../../../../lib/server-api";
+import {
+  SIGN_IN_PROVIDER,
+  type SpokeBillingRead,
+  loadSpokeBilling,
+} from "../../../../lib/topology.generated";
+
+import { logReadFailure } from "./account-data";
+
+export type BillingState =
+  | {
+      kind: "subscription";
+      status: SubscriptionLifecycleStatus;
+      planName: string | null;
+      paymentMethod: SubscriptionPaymentMethod | null;
+      accessRevokesAt: string | null;
+      portalAvailable: boolean;
+      /** Some vouched billing is on a Stripe account this spoke's key cannot read (#8217 D12). */
+      unreadable: boolean;
+    }
+  | { kind: "none"; unreadable: boolean }
+  | { kind: "failed" };
+
+/** The statuses that mean "this caller has no subscription to show" (C9). */
+const NO_SUBSCRIPTION_STATUSES: ReadonlySet<number> = new Set([401, 403, 404]);
+
+/** PII-safe error identity for logs (the `checkout.actions.ts` idiom: `err.name` only). */
+function errorName(err: unknown): string {
+  return err instanceof Error ? err.name : "unknown";
+}
+
+/** A hub-mode spoke's Billing: the rendered action through the seam, else none (#8217 D10). */
+async function loadSpokeBillingState(): Promise<BillingState> {
+  let read: SpokeBillingRead | null;
+  try {
+    const billing = await loadSpokeBilling();
+    read = billing === null ? null : await billing.read();
+  } catch (err) {
+    logReadFailure("spoke-billing", err);
+    return { kind: "failed" };
+  }
+  if (read === null) return { kind: "none", unreadable: false };
+  if (read.kind !== "subscription") return read;
+  return {
+    kind: "subscription",
+    status: read.status,
+    planName: read.planName,
+    paymentMethod: read.paymentMethod,
+    accessRevokesAt: null,
+    portalAvailable: true,
+    unreadable: read.unreadable,
+  };
+}
+
+export async function loadBilling(init: { headers: Record<string, string> }): Promise<BillingState> {
+  if (SIGN_IN_PROVIDER === "hub") return loadSpokeBillingState();
+  try {
+    const res = await subscription.me(init, { include: "billing" });
+    if (!res.ok) {
+      if (NO_SUBSCRIPTION_STATUSES.has(res.status)) return { kind: "none", unreadable: false };
+      console.error(`[account] read failed source=billing status=${res.status}`);
+      return { kind: "failed" };
+    }
+    const sub = res.body;
+    if (sub.status === null) return { kind: "none", unreadable: false };
+    return {
+      kind: "subscription",
+      status: sub.status,
+      planName: sub.planName ?? null,
+      paymentMethod: sub.paymentMethod ?? null,
+      accessRevokesAt: sub.accessRevokesAt,
+      portalAvailable: sub.portalAvailable,
+      unreadable: false,
+    };
+  } catch (err) {
+    logReadFailure("billing", err);
+    return { kind: "failed" };
+  }
+}
+
+/**
+ * The caller's Stripe billing-portal URL, or `null` for no portal (#8217
+ * D10). Minted on a Manage click, never on render: on a hub-mode spoke from
+ * the spoke's own key (a loader that fails to load is `null`), otherwise from
+ * the hub's portal route — `null` on a non-2xx or a throw, logged with the
+ * status or `err.name` only.
+ */
+export async function billingPortalUrl(): Promise<string | null> {
+  if (SIGN_IN_PROVIDER === "hub") {
+    try {
+      return (await (await loadSpokeBilling())?.portalUrl()) ?? null;
+    } catch (err) {
+      console.error(`[openBillingPortal] source=spoke-billing errName=${errorName(err)}`);
+      return null;
+    }
+  }
+  const init = await forwardedCookieInit();
+  try {
+    const res = await subscription.portalSession(init);
+    if (!res.ok) {
+      console.error(`[openBillingPortal] status=${res.status}`);
+      return null;
+    }
+    return res.body.url;
+  } catch (err) {
+    console.error(`[openBillingPortal] errName=${errorName(err)}`);
+    return null;
+  }
+}

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

@@ -0,0 +1,229 @@
+"use client"; // reads the request form on open and posts a controlled form
+
+/**
+ * RequestQuote — the New menu's Request quote popup (#8233, spec D5, D7,
+ * D10; roadmap D5). It renders the request-quote magnet's CURRENT steps:
+ * the form is read each time the popup opens (`readRequestForm`), so a step
+ * the provider adds in the Admin shows on the next open. `form: null` —
+ * Request quote switched off since the menu loaded — says so, with no form.
+ *
+ * Every field of every served step renders in order (the server checks
+ * every one, and evaluates no `showIf`), its copy resolved from the
+ * provider's `LocalizedString`s and rendered as text, never markup. Only
+ * the six input types the server answers render; a step title is a heading
+ * only when there is more than one step. Each control posts as
+ * `answer.<name>`; a blank optional answer is omitted by the action. No
+ * identity field is added — the server takes the name and email from the
+ * session; a field shows only because the provider's form asks it.
+ *
+ * Controlled, posting what the state holds, so a refusal keeps every answer.
+ * The link is sent as typed (`inputMode="url"`, no browser URL check): the
+ * server's https rule is the only one.
+ */
+
+import {
+  Button,
+  Heading,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Text,
+  Textarea,
+} from "@working-theory/ui/primitives";
+import {
+  resolveLocalizedString,
+  type MemberRequestFormResponse,
+} from "@working-theory/validation";
+import {
+  startTransition,
+  useActionState,
+  useId,
+  useState,
+  type FormEvent,
+  type ReactElement,
+} from "react";
+
+import { readRequestForm, requestQuote, type NewActionState } from "../new-actions";
+import {
+  NewPopupRefusal,
+  NewPopupStatus,
+  useNewMenuPopup,
+  useOpenRead,
+  type NewPopupLabels,
+} from "../new-menu";
+
+type RequestForm = NonNullable<MemberRequestFormResponse["form"]>;
+type FormField = RequestForm["steps"][number]["fields"][number];
+
+/** The input types the requests write answers (`ANSWERABLE`, 8170). */
+const RENDERED = new Set(["text", "email", "tel", "textarea", "select", "url"]);
+
+export interface RequestQuoteLabels extends NewPopupLabels {
+  submit: string;
+}
+
+export interface RequestQuoteProps {
+  locale: string;
+  labels: RequestQuoteLabels;
+}
+
+export function RequestQuote({ locale, labels }: RequestQuoteProps): ReactElement {
+  const [read, retry] = useOpenRead(readRequestForm);
+  if (read === "loading" || read.kind === "error") {
+    return <NewPopupStatus failed={read !== "loading"} labels={labels} onRetry={retry} />;
+  }
+  if (read.form === null) {
+    return (
+      <Text as="p" variant="body-sm" data-testid="new-quote-off">
+        {labels.errors.request_form_off}
+      </Text>
+    );
+  }
+  return <RequestQuoteForm form={read.form} locale={locale} labels={labels} />;
+}
+
+function RequestQuoteForm({
+  form,
+  locale,
+  labels,
+}: {
+  form: RequestForm;
+  locale: string;
+  labels: RequestQuoteLabels;
+}): ReactElement {
+  const popup = useNewMenuPopup();
+  const id = useId();
+  const [answers, setAnswers] = useState<Record<string, string>>({});
+  const [state, dispatch, pending] = useActionState<NewActionState, FormData>(
+    async (prev, formData) => {
+      const next = await requestQuote(prev, formData);
+      if (next.kind === "success") popup.close(true);
+      return next;
+    },
+    { kind: "idle" },
+  );
+
+  const text = (value: Record<string, string>): string =>
+    resolveLocalizedString(value, locale, form.defaultLocale);
+  const setAnswer = (name: string, value: string): void =>
+    setAnswers((current) => ({ ...current, [name]: value }));
+
+  const onSubmit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+    const formData = new FormData();
+    for (const [name, value] of Object.entries(answers)) formData.set(`answer.${name}`, value);
+    startTransition(() => dispatch(formData));
+  };
+
+  const renderField = (field: FormField): ReactElement | null => {
+    if (!RENDERED.has(field.inputType)) return null;
+    const controlId = `${id}-${field.name}`;
+    const helpId = `${controlId}-help`;
+    const help = field.copy.help ? text(field.copy.help) : null;
+    const value = answers[field.name] ?? "";
+    const common = {
+      id: controlId,
+      name: `answer.${field.name}`,
+      required: field.required === true,
+      ...(help ? { "aria-describedby": helpId } : {}),
+      "data-testid": `new-quote-field-${field.name}`,
+    };
+    const placeholder = field.copy.placeholder ? text(field.copy.placeholder) : undefined;
+    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>
+    );
+  };
+
+  const titled = form.steps.length > 1;
+  return (
+    <form onSubmit={onSubmit} className="flex flex-col gap-4" data-testid="new-quote-form">
+      {form.steps.map((step) => (
+        <div key={step.key} className="flex flex-col gap-4">
+          {titled ? (
+            <Heading level={3} visual={4} className="!text-body font-semibold">
+              {text(step.copy.title)}
+            </Heading>
+          ) : null}
+          {step.fields.map(renderField)}
+        </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-quote-submit"
+        >
+          {pending ? labels.submitting : labels.submit}
+        </Button>
+      </div>
+    </form>
+  );
+}