@aglyn/plugins-outreach 1.0.0-beta.198 → 1.0.0-beta.200

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aglyn/plugins-outreach",
-  "version": "1.0.0-beta.198",
+  "version": "1.0.0-beta.200",
   "license": "Apache-2.0",
   "homepage": "https://aglyn.com",
   "repository": {
@@ -25,19 +25,19 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@aglyn/aglyn": "1.0.0-beta.198",
-    "@aglyn/shared-data-mdi": "1.0.0-beta.198",
-    "@aglyn/shared-ui-email-campaigns": "1.0.0-beta.198",
-    "@aglyn/shared-ui-jsx": "1.0.0-beta.198",
-    "@aglyn/shared-ui-next": "1.0.0-beta.198",
-    "@aglyn/shared-ui-snackstack": "1.0.0-beta.198",
-    "@aglyn/shared-util-email": "1.0.0-beta.198",
-    "@aglyn/shared-util-http": "1.0.0-beta.198",
-    "@aglyn/shared-util-timestamp": "1.0.0-beta.198",
-    "@aglyn/shared-util-tools": "1.0.0-beta.198",
-    "@aglyn/tenant-data-admin": "1.0.0-beta.198",
-    "@aglyn/tenant-feature-instance": "1.0.0-beta.198",
-    "@aglyn/tenant-runtime": "1.0.0-beta.198",
+    "@aglyn/aglyn": "1.0.0-beta.200",
+    "@aglyn/shared-data-mdi": "1.0.0-beta.200",
+    "@aglyn/shared-ui-email-campaigns": "1.0.0-beta.200",
+    "@aglyn/shared-ui-jsx": "1.0.0-beta.200",
+    "@aglyn/shared-ui-next": "1.0.0-beta.200",
+    "@aglyn/shared-ui-snackstack": "1.0.0-beta.200",
+    "@aglyn/shared-util-email": "1.0.0-beta.200",
+    "@aglyn/shared-util-http": "1.0.0-beta.200",
+    "@aglyn/shared-util-timestamp": "1.0.0-beta.200",
+    "@aglyn/shared-util-tools": "1.0.0-beta.200",
+    "@aglyn/tenant-data-admin": "1.0.0-beta.200",
+    "@aglyn/tenant-feature-instance": "1.0.0-beta.200",
+    "@aglyn/tenant-runtime": "1.0.0-beta.200",
     "@swc/helpers": "0.5.23"
   },
   "peerDependencies": {

package/src/lib/components/do-not-contact-domains.js

@@ -19,17 +19,20 @@ import { pluginDocsHelp } from "@aglyn/aglyn";
 import { mdiTrashCanOutline } from "@aglyn/shared-data-mdi";
 import { CardDisplay, MdiIcon } from "@aglyn/shared-ui-jsx";
 import ListFilterChips from "@aglyn/shared-ui-jsx/components/list-filter-chips.component";
+import { ListPagination } from "@aglyn/shared-ui-jsx/components/list-pagination.component";
+import ListQueryNotices, { listQueryRefusals } from "@aglyn/shared-ui-jsx/components/list-query-notices.component";
 import { ListTable, listActionsColumn } from "@aglyn/shared-ui-jsx/components/list-table.component";
-import { filterListRows, inMemoryListField, listFilterGridColumns } from "@aglyn/shared-ui-jsx/const/list-grid-filter";
+import { listFilterGridColumns } from "@aglyn/shared-ui-jsx/const/list-grid-filter";
 import { useListGridFilter } from "@aglyn/shared-ui-jsx/hooks/use-list-grid-filter";
 import { useSnackbar } from "@aglyn/shared-ui-snackstack";
 import { Button, Chip, IconButton, Stack, TextField, Typography } from "@mui/material";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { normalizeOutreachDomain } from "../engine/do-not-contact-domain.js";
+import { OUTREACH_DO_NOT_CONTACT_DOMAIN_LIST_QUERY } from "../model/do-not-contact-domain-list-query.js";
 import { OUTREACH_DO_NOT_CONTACT_REASONS } from "../model/outreach.types.js";
 import { OutreachLoading, OutreachLoadProblem } from "./outreach-ui.js";
 import { useOutreachApi } from "./use-outreach-api.js";
-import { useOutreachDoNotContactDomains } from "./use-outreach-data.js";
+import { useOutreachDoNotContactDomainList } from "./use-outreach-data.js";
 /** Why a domain is on the list, as the card says it. */ export const OUTREACH_DO_NOT_CONTACT_REASON_LABELS = {
     manual: 'Added by a member',
     opt_out_reply: 'A reply asked not to be emailed',
@@ -44,17 +47,15 @@ import { useOutreachDoNotContactDomains } from "./use-outreach-data.js";
 };
 /** What the field says under a value that is not a domain. */ export const DO_NOT_CONTACT_DOMAIN_HINT = 'A domain, such as example.com. Every address at it is refused.';
 /*
- * What the domains grid's Filters panel offers (AGL-3317). The card reads
- * every listed domain, so the panel and the search answer over all of them.
- */ const DOMAIN_FILTER_FIELDS = [
-    inMemoryListField('domain', 'text'),
-    inMemoryListField('reason', 'select'),
-    inMemoryListField('detail', 'text')
-];
+ * What the domains grid's Filters panel offers (AGL-3317), each field on the
+ * list's Firestore query (AGL-3321, `OUTREACH_DO_NOT_CONTACT_DOMAIN_LIST_QUERY`):
+ * the whole domain, why it is listed, and when it was added. The search box
+ * reads the domain, each of its labels and the words of its detail.
+ */ const DOMAIN_FILTER_FIELDS = OUTREACH_DO_NOT_CONTACT_DOMAIN_LIST_QUERY.fields;
 const DOMAIN_FILTER_HEADERS = {
     domain: 'Domain',
     reason: 'Why',
-    detail: 'Detail'
+    addedAtMs: 'Added'
 };
 const DOMAIN_FILTER_OPTIONS = {
     reason: OUTREACH_DO_NOT_CONTACT_REASONS.map((reason)=>({
@@ -62,10 +63,6 @@ const DOMAIN_FILTER_OPTIONS = {
             label: OUTREACH_DO_NOT_CONTACT_REASON_LABELS[reason]
         }))
 };
-/** What the quick search reads on a domain row. */ const DOMAIN_SEARCH_FIELDS = [
-    'domain',
-    'detail'
-];
 function addedOn(entry) {
     if (!entry.addedAtMs) return '';
     return new Intl.DateTimeFormat('en-US', {
@@ -140,7 +137,6 @@ function addedOn(entry) {
  */ export function OutreachDoNotContactDomainsCard(props) {
     const { orgId } = props;
     const api = useOutreachApi(orgId);
-    const listed = useOutreachDoNotContactDomains(orgId);
     const { enqueueSnackbar } = useSnackbar();
     const [draft, setDraft] = useState('');
     const [busy, setBusy] = useState(null);
@@ -151,27 +147,27 @@ function addedOn(entry) {
             'reason'
         ]
     });
-    const searchKey = gridFilter.searchWords.join(' ');
-    const rows = useMemo(()=>filterListRows(listed.data.map((entry)=>{
-            var _entry_addedAtMs, _entry_detail;
-            return {
-                $id: entry.domain,
-                domain: entry.domain,
-                reason: entry.reason,
-                added: addedOn(entry),
-                addedAtMs: (_entry_addedAtMs = entry.addedAtMs) != null ? _entry_addedAtMs : 0,
-                detail: (_entry_detail = entry.detail) != null ? _entry_detail : ''
-            };
-        }), DOMAIN_FILTER_FIELDS, gridFilter.clauses, {
-            paths: DOMAIN_SEARCH_FIELDS,
-            words: gridFilter.searchWords
-        }), // `searchKey` stands for the words, which are a new array each render.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-        listed.data,
-        gridFilter.clauses,
-        searchKey
-    ]);
+    const filtering = gridFilter.clauses.length > 0 || gridFilter.searchWords.some((word)=>word.trim());
+    /*
+   * One page of the domains, alphabetical, with every clause and the search
+   * word on the query (AGL-3321) — never matched over the domains that
+   * happen to be loaded.
+   */ const listed = useOutreachDoNotContactDomainList(orgId, {
+        clauses: gridFilter.clauses,
+        search: gridFilter.searchWords
+    });
+    const rows = listed.rows.map((entry)=>{
+        var _entry_addedAtMs, _entry_detail;
+        return {
+            $id: entry.domain,
+            domain: entry.domain,
+            reason: entry.reason,
+            added: addedOn(entry),
+            addedAtMs: (_entry_addedAtMs = entry.addedAtMs) != null ? _entry_addedAtMs : 0,
+            detail: (_entry_detail = entry.detail) != null ? _entry_detail : ''
+        };
+    });
+    /** Nothing listed at all — not a filter that matched nothing. */ const none = listed.status === 'ready' && !listed.rows.length && !filtering && listed.page === 0;
     const change = async (action, domain)=>{
         setBusy(domain);
         try {
@@ -241,12 +237,12 @@ function addedOn(entry) {
                         })
                     ]
                 }),
-                listed.status === 'loading' ? /*#__PURE__*/ _jsx(OutreachLoading, {
+                listed.status === 'loading' && !filtering ? /*#__PURE__*/ _jsx(OutreachLoading, {
                     label: "Loading domains…"
                 }) : listed.status === 'error' || listed.status === 'refused' ? /*#__PURE__*/ _jsx(OutreachLoadProblem, {
                     status: listed.status,
                     what: "the do-not-contact domains"
-                }) : listed.data.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                }) : none ? /*#__PURE__*/ _jsx(Typography, {
                     variant: "body2",
                     color: "text.secondary",
                     children: "No domains yet."
@@ -260,18 +256,40 @@ function addedOn(entry) {
                             onChange: gridFilter.setClauses,
                             options: DOMAIN_FILTER_OPTIONS
                         }),
+                        /*#__PURE__*/ _jsx(ListQueryNotices, {
+                            refused: listQueryRefusals(listed.plan.refused, {
+                                fields: DOMAIN_FILTER_FIELDS,
+                                headers: DOMAIN_FILTER_HEADERS,
+                                options: DOMAIN_FILTER_OPTIONS
+                            }),
+                            notices: listed.plan.notices
+                        }),
                         /*#__PURE__*/ _jsx(ListTable, {
                             "aria-label": "Do not contact domains",
                             columns: domainColumns(busy !== null, (domain)=>void change('remove', domain)),
                             rows: rows,
+                            loading: listed.status === 'loading',
                             /*
-               * The panel and the search are the grid's; the card answers
-               * them over every listed domain (AGL-3317).
+               * The panel and the search are the grid's; every clause and
+               * the search word are on the list's query (AGL-3321). The grid
+               * neither filters nor sorts the page it is handed: the query's
+               * order — alphabetical, or newest added while a date applies —
+               * is the list's.
                */ filterMode: "server",
                             filterModel: gridFilter.filterModel,
                             onFilterModelChange: gridFilter.onFilterModelChange,
                             quickFilter: true,
-                            noRowsLabel: "No domains match these filters"
+                            disableColumnSorting: true,
+                            noRowsLabel: "No domains match these filters",
+                            hideFooter: true
+                        }),
+                        /*#__PURE__*/ _jsx(ListPagination, {
+                            page: listed.page,
+                            pageSize: listed.pageSize,
+                            rowCount: rows.length,
+                            hasMore: listed.hasMore,
+                            onPageChange: listed.setPage,
+                            onPageSizeChange: listed.setPageSize
                         })
                     ]
                 })

package/src/lib/components/do-not-contact-domains.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../libs/plugins/outreach/src/lib/components/do-not-contact-domains.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport { pluginDocsHelp } from '@aglyn/aglyn'\nimport { mdiTrashCanOutline } from '@aglyn/shared-data-mdi'\nimport { CardDisplay, MdiIcon } from '@aglyn/shared-ui-jsx'\nimport ListFilterChips from '@aglyn/shared-ui-jsx/components/list-filter-chips.component'\nimport {\n  ListTable,\n  listActionsColumn,\n  type ListTableProps,\n} from '@aglyn/shared-ui-jsx/components/list-table.component'\nimport {\n  filterListRows,\n  inMemoryListField,\n  listFilterGridColumns,\n} from '@aglyn/shared-ui-jsx/const/list-grid-filter'\nimport { useListGridFilter } from '@aglyn/shared-ui-jsx/hooks/use-list-grid-filter'\nimport { useSnackbar } from '@aglyn/shared-ui-snackstack'\nimport { Button, Chip, IconButton, Stack, TextField, Typography } from '@mui/material'\nimport { useMemo, useState } from 'react'\nimport { normalizeOutreachDomain } from '../engine/do-not-contact-domain'\nimport {\n  OUTREACH_DO_NOT_CONTACT_REASONS,\n  type OutreachDoNotContactDomainEntry,\n  type OutreachDoNotContactReason,\n} from '../model/outreach.types'\nimport { OutreachLoading, OutreachLoadProblem } from './outreach-ui'\nimport { useOutreachApi } from './use-outreach-api'\nimport { useOutreachDoNotContactDomains } from './use-outreach-data'\n\nexport interface OutreachDoNotContactDomainsCardProps {\n  /** The organization the hub is mounted under; `null` until the shell knows it. */\n  orgId: string | null\n}\n\n/** Why a domain is on the list, as the card says it. */\nexport const OUTREACH_DO_NOT_CONTACT_REASON_LABELS: Record<OutreachDoNotContactReason, string> = {\n  manual: 'Added by a member',\n  opt_out_reply: 'A reply asked not to be emailed',\n  unsubscribe: 'Unsubscribed',\n  hard_bounce: 'Mail bounced',\n  gateway_block: 'Its mail gateway blocked the sender',\n}\n\n/** Accessible names of the card's controls, spelled once for the specs. */\nexport const DO_NOT_CONTACT_DOMAIN_LABELS = {\n  field: 'Domain',\n  add: 'Add domain',\n  remove: (domain: string) => `Remove ${domain}`,\n} as const\n\n/** What the field says under a value that is not a domain. */\nexport const DO_NOT_CONTACT_DOMAIN_HINT = 'A domain, such as example.com. Every address at it is refused.'\n\n/*\n * What the domains grid's Filters panel offers (AGL-3317). The card reads\n * every listed domain, so the panel and the search answer over all of them.\n */\nconst DOMAIN_FILTER_FIELDS = [\n  inMemoryListField('domain', 'text'),\n  inMemoryListField('reason', 'select'),\n  inMemoryListField('detail', 'text'),\n]\nconst DOMAIN_FILTER_HEADERS: Readonly<Record<string, string>> = {\n  domain: 'Domain',\n  reason: 'Why',\n  detail: 'Detail',\n}\nconst DOMAIN_FILTER_OPTIONS = {\n  reason: OUTREACH_DO_NOT_CONTACT_REASONS.map((reason) => ({\n    value: reason,\n    label: OUTREACH_DO_NOT_CONTACT_REASON_LABELS[reason],\n  })),\n}\n/** What the quick search reads on a domain row. */\nconst DOMAIN_SEARCH_FIELDS = ['domain', 'detail'] as const\n\nfunction addedOn(entry: OutreachDoNotContactDomainEntry): string {\n  if (!entry.addedAtMs) return ''\n  return new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(entry.addedAtMs)\n}\n\n/** The grid's columns; the remove button names its domain for a screen reader. */\nfunction domainColumns(\n  busy: boolean,\n  remove: (domain: string) => void,\n): NonNullable<ListTableProps['columns']> {\n  return listFilterGridColumns(\n    [\n      {\n        field: 'domain',\n        headerName: 'Domain',\n        flex: 1,\n        minWidth: 160,\n        renderCell: ({ row }) => (\n          <Typography variant=\"body2\" component=\"span\" sx={{ fontWeight: 500 }}>\n            {row.domain}\n          </Typography>\n        ),\n      },\n      {\n        field: 'reason',\n        headerName: 'Why',\n        flex: 1,\n        minWidth: 200,\n        renderCell: ({ row }) => (\n          <Chip\n            size=\"small\"\n            variant=\"outlined\"\n            color={row.reason === 'gateway_block' ? 'warning' : 'default'}\n            label={\n              OUTREACH_DO_NOT_CONTACT_REASON_LABELS[row.reason as OutreachDoNotContactReason] ??\n              row.reason\n            }\n          />\n        ),\n      },\n      {\n        field: 'addedAtMs',\n        headerName: 'Added',\n        width: 140,\n        renderCell: ({ row }) => row.added,\n      },\n      { field: 'detail', headerName: 'Detail', flex: 1, minWidth: 160 },\n      listActionsColumn(\n        (row) => (\n          <IconButton\n            size=\"small\"\n            aria-label={DO_NOT_CONTACT_DOMAIN_LABELS.remove(row.domain)}\n            disabled={busy}\n            onClick={() => remove(row.domain)}\n          >\n            <MdiIcon path={mdiTrashCanOutline.path} fontSize=\"small\" />\n          </IconButton>\n        ),\n        { width: 72 },\n      ),\n    ],\n    DOMAIN_FILTER_FIELDS,\n    DOMAIN_FILTER_OPTIONS,\n    DOMAIN_FILTER_HEADERS,\n  )\n}\n\n/**\n * Sequences → Compliance → Do not contact domains (AGL-3244): the domains no\n * sequence emails anyone at, whoever enrolls them.\n *\n * A member adds one by hand — a company that asked, or one whose gateway is\n * known to block cold mail — and the sending runtime adds one when a hard\n * bounce reads as the domain's gateway refusing the sender. Either way it\n * is listed here with why, and a member takes it off by name.\n */\nexport function OutreachDoNotContactDomainsCard(props: OutreachDoNotContactDomainsCardProps) {\n  const { orgId } = props\n  const api = useOutreachApi(orgId)\n  const listed = useOutreachDoNotContactDomains(orgId)\n  const { enqueueSnackbar } = useSnackbar()\n  const [draft, setDraft] = useState('')\n  const [busy, setBusy] = useState<string | null>(null)\n  const normalized = normalizeOutreachDomain(draft)\n  const invalid = draft.trim() !== '' && normalized === null\n  const gridFilter = useListGridFilter({ selectFields: ['reason'] })\n  const searchKey = gridFilter.searchWords.join(' ')\n  const rows = useMemo(\n    () =>\n      filterListRows(\n        listed.data.map((entry) => ({\n          $id: entry.domain,\n          domain: entry.domain,\n          reason: entry.reason,\n          added: addedOn(entry),\n          addedAtMs: entry.addedAtMs ?? 0,\n          detail: entry.detail ?? '',\n        })),\n        DOMAIN_FILTER_FIELDS,\n        gridFilter.clauses,\n        { paths: DOMAIN_SEARCH_FIELDS, words: gridFilter.searchWords },\n      ),\n    // `searchKey` stands for the words, which are a new array each render.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [listed.data, gridFilter.clauses, searchKey],\n  )\n\n  const change = async (action: 'add' | 'remove', domain: string) => {\n    setBusy(domain)\n    try {\n      const answer = await api.changeDoNotContactDomain(action, domain)\n      if (action === 'add') setDraft('')\n      enqueueSnackbar(\n        answer.changed\n          ? action === 'add'\n            ? `${answer.domain} is on the do-not-contact list.`\n            : `${answer.domain} is off the do-not-contact list.`\n          : action === 'add'\n            ? `${answer.domain} was already on the list.`\n            : `${answer.domain} was not on the list.`,\n        { variant: answer.changed ? 'success' : 'info' },\n      )\n    } catch (error) {\n      enqueueSnackbar((error as Error).message, { variant: 'error', allowDuplicate: true })\n    } finally {\n      setBusy(null)\n    }\n  }\n\n  return (\n    <CardDisplay\n      header=\"Do not contact domains\"\n      help={pluginDocsHelp('sequences', { anchor: '#do-not-contact-domains' })}\n      contentGutterX\n      contentGutterY\n    >\n      <Stack spacing={2}>\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          {'No sequence emails anyone at these domains, whoever enrolls them. Add a company that asked not ' +\n            'to hear from you, or one whose mail gateway blocks you. When an email bounces because the ' +\n            'recipient’s gateway refused it — rather than because the address is unknown — the domain is ' +\n            'added here automatically, so the next person at that company is not tried.'}\n        </Typography>\n        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: { sm: 'flex-start' } }}>\n          <TextField\n            label={DO_NOT_CONTACT_DOMAIN_LABELS.field}\n            value={draft}\n            onChange={(event) => setDraft(event.target.value)}\n            onKeyDown={(event) => {\n              if (event.key === 'Enter' && normalized && !busy) {\n                event.preventDefault()\n                void change('add', normalized)\n              }\n            }}\n            error={invalid}\n            helperText={invalid ? 'That is not a domain.' : DO_NOT_CONTACT_DOMAIN_HINT}\n            size=\"small\"\n            sx={{ flexGrow: 1 }}\n          />\n          <Button\n            variant=\"outlined\"\n            disabled={!normalized || busy !== null}\n            onClick={() => normalized && void change('add', normalized)}\n          >\n            {DO_NOT_CONTACT_DOMAIN_LABELS.add}\n          </Button>\n        </Stack>\n        {listed.status === 'loading' ? (\n          <OutreachLoading label=\"Loading domains…\" />\n        ) : listed.status === 'error' || listed.status === 'refused' ? (\n          <OutreachLoadProblem status={listed.status} what=\"the do-not-contact domains\" />\n        ) : listed.data.length === 0 ? (\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            No domains yet.\n          </Typography>\n        ) : (\n          <Stack spacing={1}>\n            <ListFilterChips\n              fields={DOMAIN_FILTER_FIELDS}\n              headers={DOMAIN_FILTER_HEADERS}\n              clauses={gridFilter.clauses}\n              onChange={gridFilter.setClauses}\n              options={DOMAIN_FILTER_OPTIONS}\n            />\n            <ListTable\n              aria-label=\"Do not contact domains\"\n              columns={domainColumns(busy !== null, (domain) => void change('remove', domain))}\n              rows={rows}\n              /*\n               * The panel and the search are the grid's; the card answers\n               * them over every listed domain (AGL-3317).\n               */\n              filterMode=\"server\"\n              filterModel={gridFilter.filterModel}\n              onFilterModelChange={gridFilter.onFilterModelChange}\n              quickFilter\n              noRowsLabel=\"No domains match these filters\"\n            />\n          </Stack>\n        )}\n      </Stack>\n    </CardDisplay>\n  )\n}\nOutreachDoNotContactDomainsCard.displayName = 'OutreachDoNotContactDomainsCard'\n\nexport default OutreachDoNotContactDomainsCard\n"],"names":["pluginDocsHelp","mdiTrashCanOutline","CardDisplay","MdiIcon","ListFilterChips","ListTable","listActionsColumn","filterListRows","inMemoryListField","listFilterGridColumns","useListGridFilter","useSnackbar","Button","Chip","IconButton","Stack","TextField","Typography","useMemo","useState","normalizeOutreachDomain","OUTREACH_DO_NOT_CONTACT_REASONS","OutreachLoading","OutreachLoadProblem","useOutreachApi","useOutreachDoNotContactDomains","OUTREACH_DO_NOT_CONTACT_REASON_LABELS","manual","opt_out_reply","unsubscribe","hard_bounce","gateway_block","DO_NOT_CONTACT_DOMAIN_LABELS","field","add","remove","domain","DO_NOT_CONTACT_DOMAIN_HINT","DOMAIN_FILTER_FIELDS","DOMAIN_FILTER_HEADERS","reason","detail","DOMAIN_FILTER_OPTIONS","map","value","label","DOMAIN_SEARCH_FIELDS","addedOn","entry","addedAtMs","Intl","DateTimeFormat","dateStyle","format","domainColumns","busy","headerName","flex","minWidth","renderCell","row","variant","component","sx","fontWeight","size","color","width","added","aria-label","disabled","onClick","path","fontSize","OutreachDoNotContactDomainsCard","props","orgId","api","listed","enqueueSnackbar","draft","setDraft","setBusy","normalized","invalid","trim","gridFilter","selectFields","searchKey","searchWords","join","rows","data","$id","clauses","paths","words","change","action","answer","changeDoNotContactDomain","changed","error","message","allowDuplicate","header","help","anchor","contentGutterX","contentGutterY","spacing","direction","xs","sm","alignItems","onChange","event","target","onKeyDown","key","preventDefault","helperText","flexGrow","status","what","length","fields","headers","setClauses","options","columns","filterMode","filterModel","onFilterModelChange","quickFilter","noRowsLabel","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../libs/plugins/outreach/src/lib/components/do-not-contact-domains.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport { pluginDocsHelp } from '@aglyn/aglyn'\nimport { mdiTrashCanOutline } from '@aglyn/shared-data-mdi'\nimport { CardDisplay, MdiIcon } from '@aglyn/shared-ui-jsx'\nimport ListFilterChips from '@aglyn/shared-ui-jsx/components/list-filter-chips.component'\nimport { ListPagination } from '@aglyn/shared-ui-jsx/components/list-pagination.component'\nimport ListQueryNotices, {\n  listQueryRefusals,\n} from '@aglyn/shared-ui-jsx/components/list-query-notices.component'\nimport {\n  ListTable,\n  listActionsColumn,\n  type ListTableProps,\n} from '@aglyn/shared-ui-jsx/components/list-table.component'\nimport { listFilterGridColumns } from '@aglyn/shared-ui-jsx/const/list-grid-filter'\nimport { useListGridFilter } from '@aglyn/shared-ui-jsx/hooks/use-list-grid-filter'\nimport { useSnackbar } from '@aglyn/shared-ui-snackstack'\nimport { Button, Chip, IconButton, Stack, TextField, Typography } from '@mui/material'\nimport { useState } from 'react'\nimport { normalizeOutreachDomain } from '../engine/do-not-contact-domain'\nimport { OUTREACH_DO_NOT_CONTACT_DOMAIN_LIST_QUERY } from '../model/do-not-contact-domain-list-query'\nimport {\n  OUTREACH_DO_NOT_CONTACT_REASONS,\n  type OutreachDoNotContactDomainEntry,\n  type OutreachDoNotContactReason,\n} from '../model/outreach.types'\nimport { OutreachLoading, OutreachLoadProblem } from './outreach-ui'\nimport { useOutreachApi } from './use-outreach-api'\nimport { useOutreachDoNotContactDomainList } from './use-outreach-data'\n\nexport interface OutreachDoNotContactDomainsCardProps {\n  /** The organization the hub is mounted under; `null` until the shell knows it. */\n  orgId: string | null\n}\n\n/** Why a domain is on the list, as the card says it. */\nexport const OUTREACH_DO_NOT_CONTACT_REASON_LABELS: Record<OutreachDoNotContactReason, string> = {\n  manual: 'Added by a member',\n  opt_out_reply: 'A reply asked not to be emailed',\n  unsubscribe: 'Unsubscribed',\n  hard_bounce: 'Mail bounced',\n  gateway_block: 'Its mail gateway blocked the sender',\n}\n\n/** Accessible names of the card's controls, spelled once for the specs. */\nexport const DO_NOT_CONTACT_DOMAIN_LABELS = {\n  field: 'Domain',\n  add: 'Add domain',\n  remove: (domain: string) => `Remove ${domain}`,\n} as const\n\n/** What the field says under a value that is not a domain. */\nexport const DO_NOT_CONTACT_DOMAIN_HINT = 'A domain, such as example.com. Every address at it is refused.'\n\n/*\n * What the domains grid's Filters panel offers (AGL-3317), each field on the\n * list's Firestore query (AGL-3321, `OUTREACH_DO_NOT_CONTACT_DOMAIN_LIST_QUERY`):\n * the whole domain, why it is listed, and when it was added. The search box\n * reads the domain, each of its labels and the words of its detail.\n */\nconst DOMAIN_FILTER_FIELDS = OUTREACH_DO_NOT_CONTACT_DOMAIN_LIST_QUERY.fields\nconst DOMAIN_FILTER_HEADERS: Readonly<Record<string, string>> = {\n  domain: 'Domain',\n  reason: 'Why',\n  addedAtMs: 'Added',\n}\nconst DOMAIN_FILTER_OPTIONS = {\n  reason: OUTREACH_DO_NOT_CONTACT_REASONS.map((reason) => ({\n    value: reason,\n    label: OUTREACH_DO_NOT_CONTACT_REASON_LABELS[reason],\n  })),\n}\n\nfunction addedOn(entry: OutreachDoNotContactDomainEntry): string {\n  if (!entry.addedAtMs) return ''\n  return new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(entry.addedAtMs)\n}\n\n/** The grid's columns; the remove button names its domain for a screen reader. */\nfunction domainColumns(\n  busy: boolean,\n  remove: (domain: string) => void,\n): NonNullable<ListTableProps['columns']> {\n  return listFilterGridColumns(\n    [\n      {\n        field: 'domain',\n        headerName: 'Domain',\n        flex: 1,\n        minWidth: 160,\n        renderCell: ({ row }) => (\n          <Typography variant=\"body2\" component=\"span\" sx={{ fontWeight: 500 }}>\n            {row.domain}\n          </Typography>\n        ),\n      },\n      {\n        field: 'reason',\n        headerName: 'Why',\n        flex: 1,\n        minWidth: 200,\n        renderCell: ({ row }) => (\n          <Chip\n            size=\"small\"\n            variant=\"outlined\"\n            color={row.reason === 'gateway_block' ? 'warning' : 'default'}\n            label={\n              OUTREACH_DO_NOT_CONTACT_REASON_LABELS[row.reason as OutreachDoNotContactReason] ??\n              row.reason\n            }\n          />\n        ),\n      },\n      {\n        field: 'addedAtMs',\n        headerName: 'Added',\n        width: 140,\n        renderCell: ({ row }) => row.added,\n      },\n      { field: 'detail', headerName: 'Detail', flex: 1, minWidth: 160 },\n      listActionsColumn(\n        (row) => (\n          <IconButton\n            size=\"small\"\n            aria-label={DO_NOT_CONTACT_DOMAIN_LABELS.remove(row.domain)}\n            disabled={busy}\n            onClick={() => remove(row.domain)}\n          >\n            <MdiIcon path={mdiTrashCanOutline.path} fontSize=\"small\" />\n          </IconButton>\n        ),\n        { width: 72 },\n      ),\n    ],\n    DOMAIN_FILTER_FIELDS,\n    DOMAIN_FILTER_OPTIONS,\n    DOMAIN_FILTER_HEADERS,\n  )\n}\n\n/**\n * Sequences → Compliance → Do not contact domains (AGL-3244): the domains no\n * sequence emails anyone at, whoever enrolls them.\n *\n * A member adds one by hand — a company that asked, or one whose gateway is\n * known to block cold mail — and the sending runtime adds one when a hard\n * bounce reads as the domain's gateway refusing the sender. Either way it\n * is listed here with why, and a member takes it off by name.\n */\nexport function OutreachDoNotContactDomainsCard(props: OutreachDoNotContactDomainsCardProps) {\n  const { orgId } = props\n  const api = useOutreachApi(orgId)\n  const { enqueueSnackbar } = useSnackbar()\n  const [draft, setDraft] = useState('')\n  const [busy, setBusy] = useState<string | null>(null)\n  const normalized = normalizeOutreachDomain(draft)\n  const invalid = draft.trim() !== '' && normalized === null\n  const gridFilter = useListGridFilter({ selectFields: ['reason'] })\n  const filtering =\n    gridFilter.clauses.length > 0 || gridFilter.searchWords.some((word) => word.trim())\n  /*\n   * One page of the domains, alphabetical, with every clause and the search\n   * word on the query (AGL-3321) — never matched over the domains that\n   * happen to be loaded.\n   */\n  const listed = useOutreachDoNotContactDomainList(orgId, {\n    clauses: gridFilter.clauses,\n    search: gridFilter.searchWords,\n  })\n  const rows = listed.rows.map((entry) => ({\n    $id: entry.domain,\n    domain: entry.domain,\n    reason: entry.reason,\n    added: addedOn(entry),\n    addedAtMs: entry.addedAtMs ?? 0,\n    detail: entry.detail ?? '',\n  }))\n  /** Nothing listed at all — not a filter that matched nothing. */\n  const none =\n    listed.status === 'ready' && !listed.rows.length && !filtering && listed.page === 0\n\n  const change = async (action: 'add' | 'remove', domain: string) => {\n    setBusy(domain)\n    try {\n      const answer = await api.changeDoNotContactDomain(action, domain)\n      if (action === 'add') setDraft('')\n      enqueueSnackbar(\n        answer.changed\n          ? action === 'add'\n            ? `${answer.domain} is on the do-not-contact list.`\n            : `${answer.domain} is off the do-not-contact list.`\n          : action === 'add'\n            ? `${answer.domain} was already on the list.`\n            : `${answer.domain} was not on the list.`,\n        { variant: answer.changed ? 'success' : 'info' },\n      )\n    } catch (error) {\n      enqueueSnackbar((error as Error).message, { variant: 'error', allowDuplicate: true })\n    } finally {\n      setBusy(null)\n    }\n  }\n\n  return (\n    <CardDisplay\n      header=\"Do not contact domains\"\n      help={pluginDocsHelp('sequences', { anchor: '#do-not-contact-domains' })}\n      contentGutterX\n      contentGutterY\n    >\n      <Stack spacing={2}>\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          {'No sequence emails anyone at these domains, whoever enrolls them. Add a company that asked not ' +\n            'to hear from you, or one whose mail gateway blocks you. When an email bounces because the ' +\n            'recipient’s gateway refused it — rather than because the address is unknown — the domain is ' +\n            'added here automatically, so the next person at that company is not tried.'}\n        </Typography>\n        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: { sm: 'flex-start' } }}>\n          <TextField\n            label={DO_NOT_CONTACT_DOMAIN_LABELS.field}\n            value={draft}\n            onChange={(event) => setDraft(event.target.value)}\n            onKeyDown={(event) => {\n              if (event.key === 'Enter' && normalized && !busy) {\n                event.preventDefault()\n                void change('add', normalized)\n              }\n            }}\n            error={invalid}\n            helperText={invalid ? 'That is not a domain.' : DO_NOT_CONTACT_DOMAIN_HINT}\n            size=\"small\"\n            sx={{ flexGrow: 1 }}\n          />\n          <Button\n            variant=\"outlined\"\n            disabled={!normalized || busy !== null}\n            onClick={() => normalized && void change('add', normalized)}\n          >\n            {DO_NOT_CONTACT_DOMAIN_LABELS.add}\n          </Button>\n        </Stack>\n        {listed.status === 'loading' && !filtering ? (\n          <OutreachLoading label=\"Loading domains…\" />\n        ) : listed.status === 'error' || listed.status === 'refused' ? (\n          <OutreachLoadProblem status={listed.status} what=\"the do-not-contact domains\" />\n        ) : none ? (\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            No domains yet.\n          </Typography>\n        ) : (\n          <Stack spacing={1}>\n            <ListFilterChips\n              fields={DOMAIN_FILTER_FIELDS}\n              headers={DOMAIN_FILTER_HEADERS}\n              clauses={gridFilter.clauses}\n              onChange={gridFilter.setClauses}\n              options={DOMAIN_FILTER_OPTIONS}\n            />\n            <ListQueryNotices\n              refused={listQueryRefusals(listed.plan.refused, {\n                fields: DOMAIN_FILTER_FIELDS,\n                headers: DOMAIN_FILTER_HEADERS,\n                options: DOMAIN_FILTER_OPTIONS,\n              })}\n              notices={listed.plan.notices}\n            />\n            <ListTable\n              aria-label=\"Do not contact domains\"\n              columns={domainColumns(busy !== null, (domain) => void change('remove', domain))}\n              rows={rows}\n              loading={listed.status === 'loading'}\n              /*\n               * The panel and the search are the grid's; every clause and\n               * the search word are on the list's query (AGL-3321). The grid\n               * neither filters nor sorts the page it is handed: the query's\n               * order — alphabetical, or newest added while a date applies —\n               * is the list's.\n               */\n              filterMode=\"server\"\n              filterModel={gridFilter.filterModel}\n              onFilterModelChange={gridFilter.onFilterModelChange}\n              quickFilter\n              disableColumnSorting\n              noRowsLabel=\"No domains match these filters\"\n              hideFooter\n            />\n            <ListPagination\n              page={listed.page}\n              pageSize={listed.pageSize}\n              rowCount={rows.length}\n              hasMore={listed.hasMore}\n              onPageChange={listed.setPage}\n              onPageSizeChange={listed.setPageSize}\n            />\n          </Stack>\n        )}\n      </Stack>\n    </CardDisplay>\n  )\n}\nOutreachDoNotContactDomainsCard.displayName = 'OutreachDoNotContactDomainsCard'\n\nexport default OutreachDoNotContactDomainsCard\n"],"names":["pluginDocsHelp","mdiTrashCanOutline","CardDisplay","MdiIcon","ListFilterChips","ListPagination","ListQueryNotices","listQueryRefusals","ListTable","listActionsColumn","listFilterGridColumns","useListGridFilter","useSnackbar","Button","Chip","IconButton","Stack","TextField","Typography","useState","normalizeOutreachDomain","OUTREACH_DO_NOT_CONTACT_DOMAIN_LIST_QUERY","OUTREACH_DO_NOT_CONTACT_REASONS","OutreachLoading","OutreachLoadProblem","useOutreachApi","useOutreachDoNotContactDomainList","OUTREACH_DO_NOT_CONTACT_REASON_LABELS","manual","opt_out_reply","unsubscribe","hard_bounce","gateway_block","DO_NOT_CONTACT_DOMAIN_LABELS","field","add","remove","domain","DO_NOT_CONTACT_DOMAIN_HINT","DOMAIN_FILTER_FIELDS","fields","DOMAIN_FILTER_HEADERS","reason","addedAtMs","DOMAIN_FILTER_OPTIONS","map","value","label","addedOn","entry","Intl","DateTimeFormat","dateStyle","format","domainColumns","busy","headerName","flex","minWidth","renderCell","row","variant","component","sx","fontWeight","size","color","width","added","aria-label","disabled","onClick","path","fontSize","OutreachDoNotContactDomainsCard","props","orgId","api","enqueueSnackbar","draft","setDraft","setBusy","normalized","invalid","trim","gridFilter","selectFields","filtering","clauses","length","searchWords","some","word","listed","search","rows","$id","detail","none","status","page","change","action","answer","changeDoNotContactDomain","changed","error","message","allowDuplicate","header","help","anchor","contentGutterX","contentGutterY","spacing","direction","xs","sm","alignItems","onChange","event","target","onKeyDown","key","preventDefault","helperText","flexGrow","what","headers","setClauses","options","refused","plan","notices","columns","loading","filterMode","filterModel","onFilterModelChange","quickFilter","disableColumnSorting","noRowsLabel","hideFooter","pageSize","rowCount","hasMore","onPageChange","setPage","onPageSizeChange","setPageSize","displayName"],"mappings":"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"}

package/src/lib/components/enrollments-table.d.ts

@@ -1,9 +1,11 @@
 import { type ReactNode } from 'react';
 import { type OutreachEnrollment, type OutreachSequenceStep } from '../model/outreach.types';
 import type { OutreachApi } from './use-outreach-api';
-import type { OutreachEnrollmentsLoad } from './use-outreach-data';
 export interface OutreachEnrollmentsTableProps {
-    enrollments: OutreachEnrollmentsLoad;
+    /** The organization, whose enrollments the table asks for. */
+    orgId: string;
+    /** The sequence whose people these are: every page is narrowed to it. */
+    sequenceId: string;
     steps: readonly OutreachSequenceStep[];
     /**
      * Whether this sequence counts link clicks (AGL-3239). The Clicks column

package/src/lib/components/enrollments-table.js

@@ -17,19 +17,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import EmptyStateComponent from "@aglyn/shared-ui-jsx/components/empty-state.component";
 import ListFilterChips from "@aglyn/shared-ui-jsx/components/list-filter-chips.component";
+import ListQueryNotices, { listQueryRefusals } from "@aglyn/shared-ui-jsx/components/list-query-notices.component";
 import { ListPagination } from "@aglyn/shared-ui-jsx/components/list-pagination.component";
 import { ListRowActions, ListTable, listActionsColumn } from "@aglyn/shared-ui-jsx/components/list-table.component";
 import { hiddenFilterVisibility } from "@aglyn/shared-ui-jsx/const/list-filter";
-import { filterListRows, inMemoryListField, listFilterGridColumns } from "@aglyn/shared-ui-jsx/const/list-grid-filter";
-import { TABLE_PAGE_SIZE_DEFAULT } from "@aglyn/shared-ui-jsx/const/table-pagination";
+import { listFilterGridColumns } from "@aglyn/shared-ui-jsx/const/list-grid-filter";
 import { useListGridFilter } from "@aglyn/shared-ui-jsx/hooks/use-list-grid-filter";
 import { useSnackbar } from "@aglyn/shared-ui-snackstack";
 import { Button, Card, CardContent, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Stack, TextField, Typography, useMediaQuery, useTheme, Chip } from "@mui/material";
-import { useEffect, useMemo, useState } from "react";
+import { useState } from "react";
 import { OutreachCurateStepDialog, outreachNextEmailStepIndex } from "./curate-step-dialog.js";
 import { readOutreachEngagement } from "../model/enrollment-engagement.js";
-import { OUTREACH_ENROLLMENT_STATUSES, OUTREACH_TASK_KIND_LABELS } from "../model/outreach.types.js";
+import { OUTREACH_ENROLLMENT_LIST_QUERY } from "../model/enrollment-list-query.js";
+import { OUTREACH_ENROLLMENT_STATUSES, OUTREACH_STOP_REASONS, OUTREACH_TASK_KIND_LABELS } from "../model/outreach.types.js";
 import { formatOutreachTime, OUTREACH_ENROLLMENT_STATUS_LABELS, OUTREACH_STOP_REASON_LABELS, OutreachEnrollmentStatusChip, OutreachLoading, OutreachLoadProblem } from "./outreach-ui.js";
+import { useOutreachEnrollmentList } from "./use-outreach-data.js";
 /** The step an enrollment is on, as a person reads it. */ export function outreachCurrentStepLabel(enrollment, steps) {
     if (enrollment.status === 'finished' || enrollment.stepIndex >= steps.length) return 'All steps done';
     const step = steps[enrollment.stepIndex];
@@ -84,23 +86,19 @@ const ACTION_LABELS = {
     }
 };
 /*
- * What the enrollments grid's Filters panel offers (AGL-3317). Status and
- * whether the person is a lead are picked; the name, the address and the
- * stop reason are typed. `target` and `email` are no column of their own,
- * so they are hidden columns the panel can still reach.
- */ const ENROLLMENT_FILTER_FIELDS = [
-    inMemoryListField('status', 'select'),
-    inMemoryListField('target', 'select'),
-    inMemoryListField('contactName', 'text'),
-    inMemoryListField('email', 'text'),
-    inMemoryListField('stopReason', 'text')
-];
+ * What the enrollments grid's Filters panel offers (AGL-3317), each field on
+ * the table's Firestore query (AGL-3321, `OUTREACH_ENROLLMENT_LIST_QUERY`).
+ * Status, whether the person is a lead and the stop reason are picked; the
+ * address is typed whole. `target` and `email` are no column of their own,
+ * so they are hidden columns the panel can still reach; the search box
+ * reads the person's name and address.
+ */ const ENROLLMENT_FILTER_FIELDS = OUTREACH_ENROLLMENT_LIST_QUERY.fields;
 const ENROLLMENT_FILTER_HEADERS = {
     status: 'Status',
     target: 'Enrolled as',
-    contactName: 'Name',
+    stopReason: 'Stop reason',
     email: 'Email',
-    stopReason: 'Stop reason'
+    enrolled: 'Enrolled'
 };
 const ENROLLMENT_FILTER_OPTIONS = {
     status: OUTREACH_ENROLLMENT_STATUSES.map((status)=>({
@@ -116,14 +114,12 @@ const ENROLLMENT_FILTER_OPTIONS = {
             value: 'lead',
             label: 'Lead'
         }
-    ]
+    ],
+    stopReason: OUTREACH_STOP_REASONS.map((reason)=>({
+            value: reason,
+            label: OUTREACH_STOP_REASON_LABELS[reason]
+        }))
 };
-/** What the quick search reads on an enrollment row. */ const ENROLLMENT_SEARCH_FIELDS = [
-    'contactName',
-    'email',
-    'step',
-    'stopReason'
-];
 /** The filter-only columns never show. */ const ENROLLMENT_HIDDEN_COLUMNS = hiddenFilterVisibility(ENROLLMENT_FILTER_FIELDS, [
     'status',
     'stopReason'
@@ -276,7 +272,7 @@ const ENROLLMENT_FILTER_OPTIONS = {
  * do-not-contact. A table on wider screens, a list of cards on a phone.
  */ export function OutreachEnrollmentsTable(props) {
     var _CONFIRM_confirming_action, _CONFIRM_confirming_action1, _CONFIRM_confirming_action2;
-    const { enrollments, steps, timeZone, api } = props;
+    const { steps, timeZone, api } = props;
     const trackClicks = props.trackClicks === true;
     const theme = useTheme();
     const narrow = useMediaQuery(theme.breakpoints.down('md'));
@@ -285,45 +281,23 @@ const ENROLLMENT_FILTER_OPTIONS = {
     const [detail, setDetail] = useState('');
     const [busy, setBusy] = useState(null);
     const [curating, setCurating] = useState(null);
-    const [page, setPage] = useState(0);
-    const [pageSize, setPageSize] = useState(TABLE_PAGE_SIZE_DEFAULT);
     const gridFilter = useListGridFilter({
         selectFields: [
             'status',
-            'target'
+            'target',
+            'stopReason'
         ]
     });
-    const filtering = gridFilter.clauses.length > 0 || gridFilter.searchWords.length > 0;
+    const filtering = gridFilter.clauses.length > 0 || gridFilter.searchWords.some((word)=>word.trim());
     /*
-   * The rows the grid is handed, every clause and the search answered over
-   * the enrollments read so far — a window that grows as the reader pages
-   * past it, so a filter reaches further the further they go.
-   */ const searchKey = gridFilter.searchWords.join(' ');
-    const loadedData = enrollments.data;
-    const matching = useMemo(()=>filterListRows(loadedData.map((enrollment)=>({
-                enrollment,
-                status: enrollment.status,
-                target: enrollment.target === 'lead' ? 'lead' : 'contact',
-                contactName: enrollment.contactName,
-                email: enrollment.email,
-                step: outreachCurrentStepLabel(enrollment, steps),
-                stopReason: outreachStopLabel(enrollment)
-            })), ENROLLMENT_FILTER_FIELDS, gridFilter.clauses, {
-            paths: ENROLLMENT_SEARCH_FIELDS,
-            words: gridFilter.searchWords
-        }).map((row)=>row.enrollment), // `searchKey` stands for the words, which are a new array each render.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-        loadedData,
-        steps,
-        gridFilter.clauses,
-        searchKey
-    ]);
-    // A narrowed list starts again at its first page.
-    useEffect(()=>setPage(0), [
-        gridFilter.clauses,
-        searchKey
-    ]);
+   * One page of the sequence's enrollments, newest enrolled first, with
+   * every clause and the search word on the query (AGL-3321): a filter
+   * reaches the enrollment on page forty as surely as the one on page one,
+   * and nothing is matched over the rows that happen to be loaded.
+   */ const enrollments = useOutreachEnrollmentList(props.orgId, props.sequenceId, {
+        clauses: gridFilter.clauses,
+        search: gridFilter.searchWords
+    });
     const act = async (enrollment, action, why)=>{
         setBusy(enrollment.id);
         try {
@@ -354,16 +328,29 @@ const ENROLLMENT_FILTER_OPTIONS = {
             void act(enrollment, action);
         }
     };
-    if (enrollments.status === 'loading') return /*#__PURE__*/ _jsx(OutreachLoading, {
+    const chips = /*#__PURE__*/ _jsx(ListFilterChips, {
+        fields: ENROLLMENT_FILTER_FIELDS,
+        headers: ENROLLMENT_FILTER_HEADERS,
+        clauses: gridFilter.clauses,
+        onChange: gridFilter.setClauses,
+        options: ENROLLMENT_FILTER_OPTIONS
+    });
+    if (enrollments.status === 'loading' && !filtering) return /*#__PURE__*/ _jsx(OutreachLoading, {
         label: "Loading enrollments…"
     });
     if (enrollments.status === 'error' || enrollments.status === 'refused') {
-        return /*#__PURE__*/ _jsx(OutreachLoadProblem, {
-            status: enrollments.status,
-            what: "enrollments"
+        return /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 1.5,
+            children: [
+                chips,
+                /*#__PURE__*/ _jsx(OutreachLoadProblem, {
+                    status: enrollments.status,
+                    what: "enrollments"
+                })
+            ]
         });
     }
-    if (!enrollments.data.length) {
+    if (enrollments.status === 'ready' && !enrollments.rows.length && !filtering && enrollments.page === 0) {
         return /*#__PURE__*/ _jsx(Card, {
             variant: "outlined",
             children: /*#__PURE__*/ _jsx(EmptyStateComponent, {
@@ -412,28 +399,19 @@ const ENROLLMENT_FILTER_OPTIONS = {
                 }) : null
             ]
         });
-    const loaded = matching;
-    const pageRows = loaded.slice(page * pageSize, (page + 1) * pageSize);
-    const lastLoadedPage = Math.max(0, Math.ceil(loaded.length / pageSize) - 1);
-    /** Past the rows read so far, the next page reads another window first. */ const turnTo = (next)=>{
-        if ((next + 1) * pageSize > loaded.length && enrollments.hasMore) enrollments.showMore();
-        setPage(next);
-    };
+    const pageRows = enrollments.rows;
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 1.5,
         children: [
-            /*#__PURE__*/ _jsx(ListFilterChips, {
-                fields: ENROLLMENT_FILTER_FIELDS,
-                headers: ENROLLMENT_FILTER_HEADERS,
-                clauses: gridFilter.clauses,
-                onChange: gridFilter.setClauses,
-                options: ENROLLMENT_FILTER_OPTIONS
+            chips,
+            /*#__PURE__*/ _jsx(ListQueryNotices, {
+                refused: listQueryRefusals(enrollments.plan.refused, {
+                    fields: ENROLLMENT_FILTER_FIELDS,
+                    headers: ENROLLMENT_FILTER_HEADERS,
+                    options: ENROLLMENT_FILTER_OPTIONS
+                }),
+                notices: enrollments.plan.notices
             }),
-            filtering && enrollments.hasMore ? /*#__PURE__*/ _jsx(Typography, {
-                variant: "caption",
-                color: "text.secondary",
-                children: `Filtering the ${enrollments.data.length} enrollments read so far — the next page reads more.`
-            }) : null,
             narrow ? /*#__PURE__*/ _jsx(Stack, {
                 spacing: 1,
                 component: "ul",
@@ -517,6 +495,7 @@ const ENROLLMENT_FILTER_OPTIONS = {
                         columnVisibilityModel: ENROLLMENT_HIDDEN_COLUMNS
                     }
                 },
+                loading: enrollments.status === 'loading',
                 rows: pageRows.map((enrollment)=>({
                         $id: enrollment.id,
                         enrollment,
@@ -530,23 +509,25 @@ const ENROLLMENT_FILTER_OPTIONS = {
                         stopReason: outreachStopLabel(enrollment) || '—'
                     })),
                 /*
-           * The panel and the search are the grid's; the table answers them
-           * over the enrollments it read (AGL-3317).
+           * The panel and the search are the grid's; every clause and the
+           * search word are on the table's query (AGL-3321). The grid
+           * neither filters nor sorts the page it is handed: the query's
+           * one order, newest enrolled first, is the table's.
            */ filterMode: "server",
                 filterModel: gridFilter.filterModel,
                 onFilterModelChange: gridFilter.onFilterModelChange,
                 quickFilter: true,
+                disableColumnSorting: true,
                 noRowsLabel: "No enrollments match these filters",
                 hideFooter: true
             }),
             /*#__PURE__*/ _jsx(ListPagination, {
-                page: page,
-                pageSize: pageSize,
+                page: enrollments.page,
+                pageSize: enrollments.pageSize,
                 rowCount: pageRows.length,
-                count: enrollments.hasMore ? undefined : loaded.length,
-                hasMore: enrollments.hasMore || page < lastLoadedPage,
-                onPageChange: turnTo,
-                onPageSizeChange: setPageSize
+                hasMore: enrollments.hasMore,
+                onPageChange: enrollments.setPage,
+                onPageSizeChange: enrollments.setPageSize
             }),
             /*#__PURE__*/ _jsx(OutreachCurateStepDialog, {
                 enrollment: curating,