@stapel/workspaces-react 0.6.0 → 0.8.0

package/src/api/types.ts

@@ -9,11 +9,15 @@
  * openapi-typescript under-describe the runtime, apply a small documented
  * correction (see auth-react `api/types.ts` for the three canonical patterns).
  */
-import type { components } from "./generated/schema.js";
+import type { components, operations } from "./generated/schema.js";
 
 /** The generated schema table — the one source of truth for wire shapes. */
 export type Schemas = components["schemas"];
 
+/** The generated operation table — the source of truth for QUERY parameters
+ * (drf-spectacular declares them per-operation, not as a component schema). */
+export type Operations = operations;
+
 // ── aliases (the stapel-workspaces schemas this pair uses) ────────────────────
 
 /** One workspace — identity, storage, my role, member count (GET/POST/PATCH). */
@@ -34,19 +38,47 @@ export type MemberInvite = Schemas["MemberInviteRequest"];
 export type MemberInviteResult = Schemas["MemberInviteResponse"];
 /** PATCH /{id}/members/{userId} request body — the new role. */
 export type MemberRoleUpdate = Schemas["PatchedMemberUpdateRequest"];
-/** One pending/accepted invitation (a row of {@link MemberInviteResult}). */
+/** One pending/accepted invitation (a row of {@link MemberInviteResult}, and
+ * a row of the admin's invitation table — GET /{id}/invitations). The invite
+ * TOKEN is deliberately absent from this shape: it is a bearer credential
+ * that only ever leaves the backend inside the invitation email. */
 export type Invitation = Schemas["InvitationResponse"];
+/** GET /{id}/invitations 200 body — an anchor-paginated page of {@link Invitation}s. */
+export type InvitationPage = Schemas["PaginatedInvitationResponseList"];
+/** POST /{id}/members/{userId}/password/reset request body — an optional
+ * admin-chosen password, the first-login demands to raise, and an audit note. */
+export type MemberPasswordReset = Schemas["MemberPasswordResetRequest"];
+/** POST /{id}/members/{userId}/password/reset 200 body. `generated_password`
+ * is a ONE-SHOT credential (present only when the request omitted `password`)
+ * — see {@link "../model/mutations.js".useResetMemberPassword}, which keeps it
+ * out of the query cache. */
+export type MemberPasswordResetResult = Schemas["MemberPasswordResetResponse"];
 /** POST /invitations/accept request body — the token from the email link. */
 export type InvitationAccept = Schemas["InvitationAcceptRequest"];
+/** GET /invitations/{token} 200 body — the public (AllowAny) preview the
+ * `/invite/{token}` page renders before any auth decision (org-program §B2). */
+export type InvitationPreview = Schemas["InvitationPreviewResponse"];
+/** POST /invitations/{token}/claim 200 body — the single-use login grant for a
+ * not-yet-registered invitee; exchange it at auth's POST /grant/exchange/. */
+export type InvitationClaim = Schemas["InvitationClaimResponse"];
+/** One role of the effective registry (builtin + `STAPEL_WORKSPACES["ROLES"]`
+ * overlay) — GET /roles (org-program §A2). Capability strings are verbatim,
+ * wildcards (`*`, `members.*`) included. */
+export type RoleInfo = Schemas["RoleResponse"];
+/** GET /roles 200 body — the effective role registry, rank-descending. */
+export type RoleList = Schemas["RoleListResponse"];
 
 // ── documented corrections (drf-spectacular under-describes) ──────────────────
 
 /**
- * A workspace membership role, ordered least→most privileged. The generated
- * schema types `MemberResponse.role` / the invite `role` as a bare `string`,
- * but the backend (`models.Role`, a Django `TextChoices`) constrains it to
- * exactly these values. Narrowing here gives call sites a checked union — a
- * documented correction of the same kind auth-react/billing-react apply.
+ * A BUILTIN workspace membership role, ordered least→most privileged. Since
+ * stapel-workspaces 0.6.0 (org-program §A1) the effective registry is
+ * settings-extensible — a deployment can add roles (`secretary`, …) via
+ * `STAPEL_WORKSPACES["ROLES"]`, so `MemberResponse.role` is genuinely an open
+ * `string` on the wire and the registry endpoint (GET /roles, {@link RoleInfo})
+ * is the source of truth for what exists. This union names the four builtin
+ * keys that are ALWAYS present (with `owner` system-protected); use it for
+ * literals, not to validate server data.
  */
 export type WorkspaceRole = "owner" | "admin" | "member" | "viewer";
 
@@ -73,3 +105,77 @@ export interface MembersParams {
   /** Case-insensitive substring filter matched against a member's email or display name. */
   readonly search?: string;
 }
+
+/**
+ * Which invitations GET /{id}/invitations returns. Taken VERBATIM from the
+ * generated operation table (not re-typed by hand): `pending` (the backend
+ * default) — live, seat-reserving invitations, i.e. who has not accepted yet;
+ * `never_accepted` — those plus declined / revoked / expired; `all` — the full
+ * history, accepted rows included.
+ */
+export type InvitationStatusFilter = NonNullable<
+  NonNullable<
+    Operations["workspaces_api_v1_invitations_list"]["parameters"]["query"]
+  >["status"]
+>;
+
+/**
+ * Anchor-pagination query for GET /{id}/invitations (core `AnchorPagination`,
+ * the same shape as {@link MembersParams} plus the `status` filter). All
+ * optional: no params fetches the newest page of PENDING invitations
+ * (default limit 100, max 500).
+ *
+ * ANCHOR, not page numbers: a page is addressed by the opaque `next_anchor`
+ * of the page before it. There is no "page 3" to jump to and no offset to
+ * skew when an invitation is revoked mid-scroll.
+ */
+export interface InvitationsParams {
+  /** Anchor value to paginate from (exclusive) — a page's `next_anchor`. */
+  readonly anchor?: string;
+  /** Pagination direction relative to `anchor`. */
+  readonly direction?: "next" | "prev" | "center";
+  /** Page size (default 100, max 500). */
+  readonly limit?: number;
+  /** Case-insensitive substring filter on the invited email address. */
+  readonly search?: string;
+  /** Which invitations to return (default `pending`). */
+  readonly status?: InvitationStatusFilter;
+}
+
+/**
+ * One first-login demand an organization may raise on an account it admits
+ * (`settings.security.provisioned_user_policies`, backend dto
+ * `PROVISIONED_USER_POLICIES`). INDEPENDENT checkboxes, not alternatives — an
+ * org may demand both. NOT GENERATED: the security block lives inside the
+ * free-form `Workspace.settings` JSON, so drf-spectacular types it as an
+ * untyped object; the backend serializer validates exactly these two values.
+ */
+export type ProvisionedUserPolicy = "password_change" | "mfa_enroll";
+
+/**
+ * Typed shape of `Workspace.settings.security` (backend dto
+ * `WorkspaceSecuritySettings`, org-program §C3). A documented correction for
+ * the same reason as {@link WorkspaceRole}: the block is stored inside the
+ * free-form settings JSON (no schema migration on the backend), so the
+ * generated types say `object` and this is the canon of the known keys.
+ * Unknown keys are preserved verbatim by the backend — hence the index
+ * signature, and hence why the update hook MERGES rather than replaces.
+ */
+export interface WorkspaceSecuritySettings {
+  /** Whether membership requires a strong second factor. Turning it on
+   * sweeps current members and suspends those without one (reason `no_mfa`). */
+  readonly require_mfa?: boolean;
+  /**
+   * First-login steps demanded of accounts the org admits — a LIST since
+   * stapel-workspaces 0.13.0 (#90). The pre-0.13 singular
+   * `provisioned_user_policy` string is still read by the backend for old
+   * rows, but this pair only ever WRITES the list: a client that keeps
+   * writing the singular spelling silently caps the org at one demand.
+   */
+  readonly provisioned_user_policies?: readonly ProvisionedUserPolicy[];
+  /** Derived, read-only: whether the org actually set the policies (as
+   * opposed to inheriting the `password_change` default). Never sent. */
+  readonly policies_configured?: boolean;
+  /** Extra keys pass through the backend verbatim (client extension). */
+  readonly [extra: string]: unknown;
+}

package/src/api/workspacesApi.ts

@@ -1,12 +1,20 @@
 import type { StapelClient, StapelRequestOptions } from "@stapel/core";
 import type {
+  Invitation,
+  InvitationPage,
+  InvitationsParams,
   Member,
   MemberInvite,
   MemberInviteResult,
   MemberPage,
+  MemberPasswordReset,
+  MemberPasswordResetResult,
   MemberRoleUpdate,
   MembersParams,
   InvitationAccept,
+  InvitationClaim,
+  InvitationPreview,
+  RoleList,
   Workspace,
   WorkspaceCreate,
   WorkspaceList,
@@ -84,8 +92,85 @@ export interface WorkspacesApi {
   /** Remove a member from a workspace (admin+; the last owner is protected). */
   removeMember(workspaceId: string, userId: string): Promise<void>;
 
+  /**
+   * Reset a member's password on the organization's order (stapel-workspaces
+   * ≥0.14.0, #110). Capability `members.password.reset`, declared **high** —
+   * the backend wraps it in `requires_verification(scope="sensitive")`, so an
+   * ambient cookie is not enough and a step-up (or factor ENROLLMENT) 403 is
+   * the normal first answer. A missing/wrong target answers one
+   * byte-identical 404 (never an existence oracle).
+   *
+   * `generated_password` in the reply is a ONE-SHOT credential: present only
+   * when the request omitted `password`, never re-fetchable, never logged.
+   */
+  resetMemberPassword(
+    workspaceId: string,
+    userId: string,
+    body?: MemberPasswordReset
+  ): Promise<MemberPasswordResetResult>;
+
+  // ── invitation administration (#109, stapel-workspaces ≥0.12.0) ────────────
+
+  /**
+   * The workspace's invitations — the admin's "who has not accepted yet"
+   * table (capability `members.invite`). An ANCHOR-paginated page, filtered
+   * by `status` (default `pending`) and `search` (invited email). The invite
+   * token is never in the response.
+   */
+  listInvitations(
+    workspaceId: string,
+    params?: InvitationsParams
+  ): Promise<InvitationPage>;
+  /**
+   * Withdraw a live invitation — the workspace's terminal "no", the mirror of
+   * the invitee's decline (the two stay distinguishable in `status` forever).
+   * Only a `pending` one is revocable; the reply is the updated row.
+   */
+  revokeInvitation(
+    workspaceId: string,
+    invitationId: string
+  ): Promise<Invitation>;
+  /**
+   * Send the invitation email again. Accepts an EXPIRED invitation on purpose
+   * (a dead TTL is the commonest reason to resend) and refuses the three
+   * terminal states. Rotates the token and restarts the TTL — every earlier
+   * link stops working — so the reply is the updated row, not the old one.
+   */
+  resendInvitation(
+    workspaceId: string,
+    invitationId: string
+  ): Promise<Invitation>;
+
   /** Accept an invitation by its token — returns the caller's new membership. */
   acceptInvitation(body: InvitationAccept): Promise<Member>;
+
+  // ── invite flow (org-program §B2, stapel-workspaces ≥0.7.0) ────────────────
+
+  /**
+   * Public (AllowAny) invitation preview — what the `/invite/{token}` page
+   * renders before any auth decision. The token in the URL is the bearer
+   * secret: a credential, never log it.
+   */
+  getInvitationPreview(token: string): Promise<InvitationPreview>;
+  /**
+   * Mint a login grant for a NOT-yet-registered invitee (AllowAny; only valid
+   * while `email_registered === false` — an existing account gets 409
+   * `email_already_registered` and the frontend switches to login). The
+   * invitation is NOT consumed: accept stays a separate, deliberate step.
+   * The returned `grant_token` is exchanged at AUTH's `POST /grant/exchange/`
+   * — deliberately not this pair's surface (pairs don't depend on each
+   * other); `InviteAcceptFlow` hands it outward via `onLoginGrant`.
+   */
+  claimInvitation(token: string): Promise<InvitationClaim>;
+  /** Decline an invitation (authenticated + email-match) — the invitee's
+   * terminal "no". Decline ≠ revoke; both stay distinguishable in `status`. */
+  declineInvitation(token: string): Promise<void>;
+
+  // ── role registry (org-program §A2, stapel-workspaces ≥0.6.0) ──────────────
+
+  /** The effective role registry (builtin + deployment overlay), for
+   * RoleSelect-class UI — capability strings verbatim, rank-descending. */
+  listRoles(): Promise<RoleList>;
 }
 
 export function createWorkspacesApi(client: StapelClient): WorkspacesApi {
@@ -141,11 +226,63 @@ export function createWorkspacesApi(client: StapelClient): WorkspacesApi {
         mutating()
       ),
 
+    resetMemberPassword: (workspaceId, userId, body) =>
+      client.post(
+        `/${encodeURIComponent(workspaceId)}/members/${encodeURIComponent(userId)}/password/reset`,
+        (body ?? {}) satisfies MemberPasswordReset,
+        mutating()
+      ),
+
+    listInvitations: (workspaceId, params) => {
+      const query: Record<string, string | number> = {};
+      if (params?.anchor !== undefined) query.anchor = params.anchor;
+      if (params?.direction !== undefined) query.direction = params.direction;
+      if (params?.limit !== undefined) query.limit = params.limit;
+      if (params?.search !== undefined) query.search = params.search;
+      if (params?.status !== undefined) query.status = params.status;
+      return client.get(`/${encodeURIComponent(workspaceId)}/invitations`, {
+        query,
+      });
+    },
+
+    revokeInvitation: (workspaceId, invitationId) =>
+      client.post(
+        `/${encodeURIComponent(workspaceId)}/invitations/${encodeURIComponent(invitationId)}/revoke`,
+        undefined,
+        mutating()
+      ),
+
+    resendInvitation: (workspaceId, invitationId) =>
+      client.post(
+        `/${encodeURIComponent(workspaceId)}/invitations/${encodeURIComponent(invitationId)}/resend`,
+        undefined,
+        mutating()
+      ),
+
     acceptInvitation: (body) =>
       client.post(
         "/invitations/accept",
         body satisfies InvitationAccept,
         mutating()
       ),
+
+    getInvitationPreview: (token) =>
+      client.get(`/invitations/${encodeURIComponent(token)}`),
+
+    claimInvitation: (token) =>
+      client.post(
+        `/invitations/${encodeURIComponent(token)}/claim`,
+        undefined,
+        mutating()
+      ),
+
+    declineInvitation: (token) =>
+      client.post(
+        `/invitations/${encodeURIComponent(token)}/decline`,
+        undefined,
+        mutating()
+      ),
+
+    listRoles: () => client.get("/roles"),
   };
 }

package/src/default/InviteAcceptPage.tsx

@@ -0,0 +1,373 @@
+/**
+ * `<InviteAcceptPage/>` — the default `/invite/{token}` route component
+ * (org-program §B4): every state of the `InviteAcceptFlow` headless journey
+ * rendered with antd, with the two HOST SLOTS the pair cannot own:
+ *
+ *  - `renderLoginPanel` — the sign-in surface for a registered invitee
+ *    without a session (drop auth-react's `<AuthPanel/>` in; call
+ *    `onLoggedIn(email)` — or simply let the `sessionEmail` prop update,
+ *    the flow re-routes on it automatically).
+ *  - `renderInitialSetup` — the basic-data step for a freshly created
+ *    account (drop profiles-react's `InitialSetupPrompt`/`InitialSetupModal`
+ *    in; call `onDone()`). Omitted → the step auto-skips.
+ *
+ * THE GRANT SEAM (§B4): for a NEW user the flow mints a login grant and this
+ * page hands it to YOUR `onLoginGrant(grantToken)` — wire it to auth-react's
+ * `api.exchangeLoginGrant(grantToken)` + `session.adopt(...)`. When your
+ * callback's promise resolves the page advances the flow automatically
+ * (`grantExchanged`); a rejection shows a retry. The pairs stay decoupled:
+ * this package never imports auth-react.
+ *
+ * Like the pair's other default skins (MembersManager/WorkspaceSettings),
+ * theming comes from the host's antd ConfigProvider — this is a route BODY,
+ * not a self-themed shell.
+ */
+import { useEffect, useRef, useState } from "react";
+import type { ReactElement, ReactNode } from "react";
+import { Alert, Button, Card, Flex, Result, Spin, Typography } from "antd";
+import { useFormatFlowError, useT } from "@stapel/core";
+import { InviteAcceptFlow } from "../headless/InviteAcceptFlow.js";
+import type { InviteAcceptFlowBag } from "../headless/InviteAcceptFlow.js";
+import type { InvitationPreview, Member } from "../api/types.js";
+import { WORKSPACES_I18N_KEYS } from "../i18n/keys.js";
+
+export interface InviteAcceptPageProps {
+  /** The invite token from the route — a bearer secret, never log it. */
+  readonly token: string;
+  /** The signed-in account's email, or null/undefined when no session
+   * (e.g. auth-react's `useAuthSessionState().user?.email ?? null`). */
+  readonly sessionEmail?: string | null;
+  /**
+   * Exchange the login grant at auth (the §B4 seam — see the module doc).
+   * Resolve = signed in (the page advances); reject = retry offered.
+   */
+  readonly onLoginGrant?: (grantToken: string) => void | Promise<void>;
+  /** Login slot for `loginRequired` (registered invitee, no session). */
+  readonly renderLoginPanel?: (ctx: {
+    onLoggedIn: (email: string) => void;
+  }) => ReactNode;
+  /** Basic-data slot for `basicData` (fresh account). Omitted → auto-skip. */
+  readonly renderInitialSetup?: (ctx: { onDone: () => void }) => ReactNode;
+  /** Wrong-account CTA (sign out / switch). Omitted → CTA hidden. */
+  readonly onSwitchAccount?: () => void;
+  readonly onAccepted?: (member: Member) => void;
+  readonly onDeclined?: () => void;
+}
+
+export function InviteAcceptPage(props: InviteAcceptPageProps): ReactElement {
+  return (
+    <InviteAcceptFlow
+      token={props.token}
+      sessionEmail={props.sessionEmail ?? null}
+      {...(props.onAccepted !== undefined ? { onAccepted: props.onAccepted } : {})}
+      {...(props.onDeclined !== undefined ? { onDeclined: props.onDeclined } : {})}
+    >
+      {(bag) => (
+        <PageBody
+          bag={bag}
+          sessionEmail={props.sessionEmail ?? null}
+          {...(props.onLoginGrant !== undefined
+            ? { onLoginGrant: props.onLoginGrant }
+            : {})}
+          {...(props.renderLoginPanel !== undefined
+            ? { renderLoginPanel: props.renderLoginPanel }
+            : {})}
+          {...(props.renderInitialSetup !== undefined
+            ? { renderInitialSetup: props.renderInitialSetup }
+            : {})}
+          {...(props.onSwitchAccount !== undefined
+            ? { onSwitchAccount: props.onSwitchAccount }
+            : {})}
+        />
+      )}
+    </InviteAcceptFlow>
+  );
+}
+
+const UNAVAILABLE_KEY: Record<string, string> = {
+  expired: WORKSPACES_I18N_KEYS.inviteUnavailableExpired,
+  revoked: WORKSPACES_I18N_KEYS.inviteUnavailableRevoked,
+  accepted: WORKSPACES_I18N_KEYS.inviteUnavailableAccepted,
+  declined: WORKSPACES_I18N_KEYS.inviteUnavailableDeclined,
+};
+
+function InviteHeader(props: { preview: InvitationPreview }): ReactElement {
+  const t = useT();
+  return (
+    <Flex vertical gap={4}>
+      <Typography.Title level={3} style={{ margin: 0 }}>
+        {t(WORKSPACES_I18N_KEYS.inviteAcceptTitle, {
+          workspace: props.preview.workspace_name,
+        })}
+      </Typography.Title>
+      <Typography.Text type="secondary">
+        {t(WORKSPACES_I18N_KEYS.inviteRoleLine, { role: props.preview.role })}
+      </Typography.Text>
+      <Typography.Text type="secondary">
+        {t(WORKSPACES_I18N_KEYS.inviteEmailLine, {
+          email: props.preview.email_masked,
+        })}
+      </Typography.Text>
+    </Flex>
+  );
+}
+
+/** A real component (not hooks in the render-prop lambda) — owns the
+ * grant-exchange effect below. */
+function PageBody(props: {
+  bag: InviteAcceptFlowBag;
+  sessionEmail: string | null;
+  onLoginGrant?: (grantToken: string) => void | Promise<void>;
+  renderLoginPanel?: (ctx: { onLoggedIn: (email: string) => void }) => ReactNode;
+  renderInitialSetup?: (ctx: { onDone: () => void }) => ReactNode;
+  onSwitchAccount?: () => void;
+}): ReactElement {
+  const t = useT();
+  const formatError = useFormatFlowError();
+  const { bag } = props;
+  const s = bag.state;
+
+  // ── the grant seam: run the host's exchange when the grant is issued ──────
+  const { onLoginGrant, renderInitialSetup } = props;
+  const grantToken = s.step === "grantIssued" ? s.grantToken : null;
+  const [exchangeFailed, setExchangeFailed] = useState(false);
+  const exchangedRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (grantToken === null || onLoginGrant === undefined) return;
+    if (exchangedRef.current === grantToken) return; // once per grant
+    exchangedRef.current = grantToken;
+    setExchangeFailed(false);
+    void (async () => {
+      try {
+        await onLoginGrant(grantToken);
+        bag.grantExchanged();
+      } catch {
+        // The grant is single-use server-side but un-consumed on a network
+        // fault; retry re-runs the host callback with the SAME token.
+        exchangedRef.current = null;
+        setExchangeFailed(true);
+      }
+    })();
+  }, [grantToken, onLoginGrant, bag]);
+
+  // ── basic-data auto-skip when the host provides no slot ───────────────────
+  useEffect(() => {
+    if (s.step === "basicData" && renderInitialSetup === undefined) {
+      bag.completeBasicData();
+    }
+  }, [s.step, renderInitialSetup, bag]);
+
+  switch (s.step) {
+    case "idle":
+    case "loadingPreview":
+      return (
+        <Card data-testid="invite-accept-page">
+          <Flex vertical align="center" gap="middle">
+            <Typography.Text type="secondary">
+              {t(WORKSPACES_I18N_KEYS.inviteLoading)}
+            </Typography.Text>
+            <Spin />
+          </Flex>
+        </Card>
+      );
+
+    case "previewError":
+      return (
+        <Card data-testid="invite-accept-page">
+          <Alert type="error" showIcon message={formatError(s.error)} />
+        </Card>
+      );
+
+    case "unavailable":
+      return (
+        <Card data-testid="invite-accept-page">
+          <Result
+            status="info"
+            title={s.preview.workspace_name}
+            subTitle={t(
+              UNAVAILABLE_KEY[s.status] ??
+                WORKSPACES_I18N_KEYS.inviteUnavailableRevoked
+            )}
+          />
+        </Card>
+      );
+
+    case "wrongAccount":
+      return (
+        <Card data-testid="invite-accept-page">
+          <Flex vertical gap="middle">
+            <InviteHeader preview={s.preview} />
+            <Alert
+              type="warning"
+              showIcon
+              message={t(WORKSPACES_I18N_KEYS.inviteWrongAccount)}
+              description={t(WORKSPACES_I18N_KEYS.inviteWrongAccountHint, {
+                email: props.sessionEmail ?? "",
+                invited: s.preview.email_masked,
+              })}
+            />
+            {props.onSwitchAccount && (
+              <Button onClick={props.onSwitchAccount} data-analytics="flow">
+                {t(WORKSPACES_I18N_KEYS.inviteSwitchAccountCta)}
+              </Button>
+            )}
+          </Flex>
+        </Card>
+      );
+
+    case "loginRequired":
+      return (
+        <Card data-testid="invite-accept-page">
+          <Flex vertical gap="middle">
+            <InviteHeader preview={s.preview} />
+            <Typography.Text strong>
+              {t(WORKSPACES_I18N_KEYS.inviteLoginTitle)}
+            </Typography.Text>
+            {props.renderLoginPanel?.({
+              onLoggedIn: (email) => bag.sessionEstablished(email),
+            })}
+          </Flex>
+        </Card>
+      );
+
+    case "newUser":
+    case "claiming":
+    case "claimError":
+      return (
+        <Card data-testid="invite-accept-page">
+          <Flex vertical gap="middle">
+            <InviteHeader preview={s.preview} />
+            <Typography.Text type="secondary">
+              {t(WORKSPACES_I18N_KEYS.inviteNewUserHint, {
+                email: s.preview.email_masked,
+              })}
+            </Typography.Text>
+            {s.step === "claimError" && (
+              <Alert type="error" showIcon message={formatError(s.error)} />
+            )}
+            <Button
+              type="primary"
+              loading={s.step === "claiming"}
+              onClick={() => bag.claim()}
+              data-analytics="flow"
+            >
+              {t(
+                s.step === "claiming"
+                  ? WORKSPACES_I18N_KEYS.inviteClaiming
+                  : WORKSPACES_I18N_KEYS.inviteCreateAccountCta
+              )}
+            </Button>
+          </Flex>
+        </Card>
+      );
+
+    case "grantIssued":
+      return (
+        <Card data-testid="invite-accept-page">
+          <Flex vertical align="center" gap="middle">
+            {exchangeFailed ? (
+              <>
+                <Alert
+                  type="error"
+                  showIcon
+                  message={t(WORKSPACES_I18N_KEYS.inviteExchangeFailed)}
+                />
+                <Button
+                  type="primary"
+                  onClick={() => {
+                    // Re-arm the effect for the same grant token.
+                    exchangedRef.current = null;
+                    setExchangeFailed(false);
+                  }}
+                  data-analytics="flow"
+                >
+                  {t(WORKSPACES_I18N_KEYS.inviteRetryCta)}
+                </Button>
+              </>
+            ) : (
+              <>
+                <Typography.Text type="secondary">
+                  {t(WORKSPACES_I18N_KEYS.inviteExchanging)}
+                </Typography.Text>
+                <Spin />
+              </>
+            )}
+          </Flex>
+        </Card>
+      );
+
+    case "basicData":
+      return (
+        <Card data-testid="invite-accept-page">
+          <Flex vertical gap="middle">
+            <Typography.Title level={4} style={{ margin: 0 }}>
+              {t(WORKSPACES_I18N_KEYS.inviteBasicDataTitle)}
+            </Typography.Title>
+            {renderInitialSetup ? (
+              renderInitialSetup({ onDone: () => bag.completeBasicData() })
+            ) : (
+              <Spin />
+            )}
+          </Flex>
+        </Card>
+      );
+
+    case "acceptPrompt":
+    case "accepting":
+    case "declining":
+    case "acceptError":
+      return (
+        <Card data-testid="invite-accept-page">
+          <Flex vertical gap="middle">
+            <InviteHeader preview={s.preview} />
+            {s.step === "acceptError" && (
+              <Alert type="error" showIcon message={formatError(s.error)} />
+            )}
+            <Flex gap="small">
+              <Button
+                type="primary"
+                loading={s.step === "accepting"}
+                disabled={s.step === "declining"}
+                onClick={() => bag.accept()}
+                data-analytics="flow"
+              >
+                {t(WORKSPACES_I18N_KEYS.inviteJoinCta)}
+              </Button>
+              <Button
+                danger
+                loading={s.step === "declining"}
+                disabled={s.step === "accepting"}
+                onClick={() => bag.decline()}
+                data-analytics="flow"
+              >
+                {t(WORKSPACES_I18N_KEYS.inviteDeclineCta)}
+              </Button>
+            </Flex>
+          </Flex>
+        </Card>
+      );
+
+    case "accepted":
+      return (
+        <Card data-testid="invite-accept-page">
+          <Result
+            status="success"
+            title={t(WORKSPACES_I18N_KEYS.inviteAccepted, {
+              workspace: s.preview.workspace_name,
+            })}
+          />
+        </Card>
+      );
+
+    case "declined":
+      return (
+        <Card data-testid="invite-accept-page">
+          <Result
+            status="info"
+            title={s.preview.workspace_name}
+            subTitle={t(WORKSPACES_I18N_KEYS.inviteDeclined)}
+          />
+        </Card>
+      );
+  }
+}