@aglyn/plugins-outreach 1.0.0-beta.199 → 1.0.0-beta.201

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

@@ -14,22 +14,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */ 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs } 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 { 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 { Card, CardContent, Chip, Link, Stack, Tooltip, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { useMemo } from "react";
+import { outreachClickCountLabel, outreachClickSummary } from "../model/enrollment-engagement.js";
+import { OUTREACH_ENROLLMENT_CLICK_FIELDS, 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 { useOutreachEnrollmentActions } from "./enrollment-actions.js";
+import { OUTREACH_CLICKED_FILTER_VALUE, OUTREACH_UNCLICKED_FILTER_VALUE } from "./enrollment-filter-params.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];
@@ -46,63 +49,34 @@ import { formatOutreachTime, OUTREACH_ENROLLMENT_STATUS_LABELS, OUTREACH_STOP_RE
     var _enrollment_lastSentAtMs, _enrollment_stoppedAtMs, _enrollment_createdAtMs;
     return Math.max((_enrollment_lastSentAtMs = enrollment.lastSentAtMs) != null ? _enrollment_lastSentAtMs : 0, (_enrollment_stoppedAtMs = enrollment.stoppedAtMs) != null ? _enrollment_stoppedAtMs : 0, (_enrollment_createdAtMs = enrollment.createdAtMs) != null ? _enrollment_createdAtMs : 0);
 }
-/** What a member may do to an enrollment in the status it is in. */ function actionsFor(enrollment, steps) {
-    const actions = [];
-    // Rewrite the next email for this one person, while one is still to go.
-    if (outreachNextEmailStepIndex(enrollment, steps) !== null) actions.push('curate');
-    if (enrollment.status === 'active') actions.push('pause', 'stop');
-    if (enrollment.status === 'paused') actions.push('resume', 'stop');
-    if (enrollment.status !== 'opted_out') actions.push('do_not_contact');
-    return actions;
-}
-const ACTION_LABELS = {
-    curate: 'Curate next step',
-    pause: 'Pause',
-    resume: 'Resume',
-    stop: 'Stop',
-    do_not_contact: 'Mark do-not-contact'
-};
 /** Whether the step the enrollment is on goes out as this person's own copy (AGL-3324). */ export function outreachStepIsCurated(enrollment) {
     var _enrollment_stepOverrides;
     return Boolean((_enrollment_stepOverrides = enrollment.stepOverrides) == null ? void 0 : _enrollment_stepOverrides[String(enrollment.stepIndex)]);
 }
-/** What the snackbar says once an action lands. */ const DONE_LABELS = {
-    pause: 'Paused.',
-    resume: 'Resumed.',
-    stop: 'Stopped.'
-};
-/** The two actions that end something for good ask first. */ const CONFIRM = {
-    stop: {
-        title: 'Stop this enrollment?',
-        body: 'They won’t get any more steps from this sequence, and they can’t be enrolled in it again.',
-        label: 'Stop'
-    },
-    do_not_contact: {
-        title: 'Mark do-not-contact?',
-        body: 'The address goes on your organization’s do-not-contact list, which every sequence checks before ' + 'every send, and they are stopped in every sequence they are in.',
-        label: 'Mark do-not-contact'
-    }
-};
 /*
- * 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.
+ *
+ * A sequence that counts clicks adds two more (AGL-3332), on the same query:
+ * whether the person clicked, and a destination they followed — matched
+ * whole against the destinations stored on the enrollment, never by a piece
+ * of its address, so "followed /pricing" does not also list the people who
+ * followed "/pricing/enterprise".
+ */ const BASE_FILTER_FIELDS = OUTREACH_ENROLLMENT_LIST_QUERY.fields.filter((field)=>!OUTREACH_ENROLLMENT_CLICK_FIELDS.includes(field.column));
 const ENROLLMENT_FILTER_HEADERS = {
     status: 'Status',
     target: 'Enrolled as',
-    contactName: 'Name',
+    stopReason: 'Stop reason',
     email: 'Email',
-    stopReason: 'Stop reason'
+    enrolled: 'Enrolled',
+    clicked: 'Clicked',
+    link: 'Link followed'
 };
-const ENROLLMENT_FILTER_OPTIONS = {
+const BASE_FILTER_OPTIONS = {
     status: OUTREACH_ENROLLMENT_STATUSES.map((status)=>({
             value: status,
             label: OUTREACH_ENROLLMENT_STATUS_LABELS[status]
@@ -116,26 +90,82 @@ 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'
+const CLICKED_OPTIONS = [
+    {
+        value: OUTREACH_CLICKED_FILTER_VALUE,
+        label: 'Yes'
+    },
+    {
+        value: OUTREACH_UNCLICKED_FILTER_VALUE,
+        label: 'No'
+    }
 ];
-/** The filter-only columns never show. */ const ENROLLMENT_HIDDEN_COLUMNS = hiddenFilterVisibility(ENROLLMENT_FILTER_FIELDS, [
-    'status',
-    'stopReason'
-]);
+/** Columns a reader can show from the column chooser, off until they do (AGL-3332). */ const CLICK_DETAIL_COLUMNS = [
+    'linksFollowed',
+    'lastClick',
+    'scannerClicks'
+];
+/** The table's grammar, with the click fields when the sequence counts clicks. */ function filterFieldsFor(trackClicks) {
+    return trackClicks ? OUTREACH_ENROLLMENT_LIST_QUERY.fields : BASE_FILTER_FIELDS;
+}
+/** What the grid's cells and its export read off one enrollment. */ function filterRow(enrollment, steps, clicks) {
+    return {
+        enrollment,
+        status: enrollment.status,
+        target: enrollment.target === 'lead' ? 'lead' : 'contact',
+        contactName: enrollment.contactName,
+        email: enrollment.email,
+        step: outreachCurrentStepLabel(enrollment, steps),
+        stopReason: outreachStopLabel(enrollment),
+        clicked: clicks.clicks > 0 ? OUTREACH_CLICKED_FILTER_VALUE : OUTREACH_UNCLICKED_FILTER_VALUE,
+        link: clicks.followed
+    };
+}
+/** The stop reason: its short label, with every word of it on hover and on the person's page. */ function StopReasonCell(props) {
+    var _OUTREACH_STOP_REASON_LABELS_enrollment_stopReason;
+    const { enrollment } = props;
+    if (!enrollment.stopReason) {
+        return /*#__PURE__*/ _jsx(Typography, {
+            variant: "body2",
+            color: "text.secondary",
+            children: "—"
+        });
+    }
+    const label = (_OUTREACH_STOP_REASON_LABELS_enrollment_stopReason = OUTREACH_STOP_REASON_LABELS[enrollment.stopReason]) != null ? _OUTREACH_STOP_REASON_LABELS_enrollment_stopReason : '';
+    const text = /*#__PURE__*/ _jsx(Typography, {
+        variant: "body2",
+        sx: _extends({
+            whiteSpace: 'normal',
+            lineHeight: 1.3
+        }, enrollment.stopDetail ? {
+            textDecoration: 'underline dotted',
+            textUnderlineOffset: 3,
+            cursor: 'help'
+        } : {}),
+        children: label
+    });
+    return enrollment.stopDetail ? /*#__PURE__*/ _jsx(Tooltip, {
+        title: outreachStopLabel(enrollment),
+        describeChild: true,
+        children: text
+    }) : text;
+}
 /** The table's columns; the person and the actions are drawn from the row's enrollment. */ function columns(rowActions, trackClicks) {
     return [
         {
             field: 'person',
             headerName: 'Person',
-            flex: 1,
-            minWidth: 200,
+            flex: 1.2,
+            minWidth: 190,
             sortable: false,
+            // What the export writes for a column that is drawn rather than read.
+            valueGetter: (_value, row)=>row.enrollment.contactName ? `${row.enrollment.contactName} <${row.enrollment.email}>` : row.enrollment.email,
             renderCell: ({ row })=>/*#__PURE__*/ _jsxs(Stack, {
                     spacing: 0,
                     sx: {
@@ -176,7 +206,7 @@ const ENROLLMENT_FILTER_OPTIONS = {
         {
             field: 'status',
             headerName: 'Status',
-            width: 120,
+            width: 110,
             renderCell: ({ row })=>/*#__PURE__*/ _jsx(OutreachEnrollmentStatusChip, {
                     status: row.status
                 })
@@ -212,158 +242,189 @@ const ENROLLMENT_FILTER_OPTIONS = {
         {
             field: 'nextSend',
             headerName: 'Next send',
-            width: 190,
+            width: 170,
             sortable: false
         },
         {
             field: 'lastActivity',
             headerName: 'Last activity',
-            width: 190,
+            width: 170,
             sortable: false
         },
         ...trackClicks ? [
             {
                 field: 'clicks',
                 headerName: 'Clicks',
-                width: 130,
+                description: 'A person’s clicks, and how many different links they followed. Scanners are not counted.',
+                width: 110,
                 sortable: false,
-                renderCell: ({ row })=>{
-                    const engagement = readOutreachEngagement(row.enrollment.engagement);
-                    if (!engagement.clicks) {
-                        return /*#__PURE__*/ _jsx(Typography, {
-                            variant: "body2",
-                            color: "text.secondary",
-                            children: "—"
-                        });
-                    }
-                    return /*#__PURE__*/ _jsxs(Stack, {
-                        spacing: 0,
-                        sx: {
-                            justifyContent: 'center',
-                            height: '100%'
-                        },
-                        children: [
-                            /*#__PURE__*/ _jsx(Typography, {
-                                variant: "body2",
-                                children: engagement.clicks === 1 ? '1 click' : `${engagement.clicks} clicks`
-                            }),
-                            engagement.lastClickUrl ? /*#__PURE__*/ _jsx(Typography, {
-                                variant: "caption",
-                                color: "text.secondary",
-                                noWrap: true,
-                                children: engagement.lastClickUrl
-                            }) : null
-                        ]
-                    });
-                }
+                renderCell: ({ row })=>/*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: row.clicks === '—' ? 'text.secondary' : undefined,
+                        children: row.clicks
+                    })
+            },
+            {
+                field: 'linksFollowed',
+                headerName: 'Links followed',
+                flex: 1,
+                minWidth: 220,
+                sortable: false
+            },
+            {
+                field: 'lastClick',
+                headerName: 'Last click',
+                width: 170,
+                sortable: false
+            },
+            {
+                field: 'scannerClicks',
+                headerName: 'Scanner clicks',
+                description: 'Clicks a security scanner made, which are not counted as the person’s.',
+                width: 130,
+                sortable: false
             }
         ] : [],
         {
             field: 'stopReason',
             headerName: 'Stop reason',
             flex: 1,
-            minWidth: 170
+            minWidth: 170,
+            renderCell: ({ row })=>/*#__PURE__*/ _jsx(StopReasonCell, {
+                    enrollment: row.enrollment
+                })
         },
         listActionsColumn((row)=>rowActions(row.enrollment), {
             width: 72
         })
     ];
 }
+/** A plain click on a link, which the page handles itself; any other is the browser's. */ const plainClick = (event)=>!event.defaultPrevented && event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
 /**
  * A sequence's enrollments (AGL-2980): who is in it, where each person
  * stands, when their next step goes out in the mailbox's timezone, and the
  * four things a member can do about it — pause, resume, stop, and mark
  * do-not-contact. A table on wider screens, a list of cards on a phone.
+ *
+ * Each row opens the person's own page (AGL-3332), which holds everything
+ * else known about them: so a cell says one thing, whole, and the detail
+ * behind it is a click away rather than cut off at the column's edge.
  */ export function OutreachEnrollmentsTable(props) {
-    var _CONFIRM_confirming_action, _CONFIRM_confirming_action1, _CONFIRM_confirming_action2;
-    const { enrollments, steps, timeZone, api } = props;
+    const { steps, timeZone, api, onOpen, hrefFor } = props;
     const trackClicks = props.trackClicks === true;
     const theme = useTheme();
     const narrow = useMediaQuery(theme.breakpoints.down('md'));
-    const { enqueueSnackbar } = useSnackbar();
-    const [confirming, setConfirming] = useState(null);
-    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({
+    const actions = useOutreachEnrollmentActions({
+        api,
+        steps
+    });
+    const fields = useMemo(()=>filterFieldsFor(trackClicks), [
+        trackClicks
+    ]);
+    const gridFilter = useListGridFilter(_extends({
         selectFields: [
             'status',
-            'target'
+            'target',
+            'stopReason',
+            'clicked',
+            'link'
         ]
-    });
-    const filtering = gridFilter.clauses.length > 0 || gridFilter.searchWords.length > 0;
+    }, props.clauses !== undefined ? {
+        clauses: props.clauses,
+        onChange: props.onClausesChange
+    } : {}));
+    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. The
+   * click filters (AGL-3332) are on it too, answered by the `clicked` flag
+   * and the destinations the click route stores on each enrollment.
+   */ const enrollments = useOutreachEnrollmentList(props.orgId, props.sequenceId, {
+        clauses: gridFilter.clauses,
+        search: gridFilter.searchWords
+    });
+    const loadedData = enrollments.rows;
+    const summaries = useMemo(()=>new Map(loadedData.map((enrollment)=>[
+                enrollment.id,
+                outreachClickSummary(enrollment.engagement)
+            ])), [
+        loadedData
     ]);
-    const act = async (enrollment, action, why)=>{
-        setBusy(enrollment.id);
-        try {
-            const answer = await api.actOnEnrollment(enrollment.id, action, why);
-            const others = answer.stoppedOthers;
-            enqueueSnackbar(action === 'do_not_contact' ? `Marked do-not-contact${others ? `, and stopped in ${others} other ${others === 1 ? 'sequence' : 'sequences'}` : ''}.` : answer.changed ? DONE_LABELS[action] : 'Nothing to change.', {
-                variant: 'success'
-            });
-        } catch (error) {
-            enqueueSnackbar(error.message, {
-                variant: 'error',
-                allowDuplicate: true
-            });
-        } finally{
-            setBusy(null);
-        }
+    const clicksOf = (enrollment)=>{
+        var _summaries_get;
+        return (_summaries_get = summaries.get(enrollment.id)) != null ? _summaries_get : outreachClickSummary(enrollment.engagement);
     };
-    const choose = (enrollment, action)=>{
-        if (action === 'curate') {
-            setCurating(enrollment);
-        } else if (CONFIRM[action]) {
-            setDetail('');
-            setConfirming({
-                enrollment,
-                action
-            });
-        } else {
-            void act(enrollment, action);
+    /*
+   * The destinations the "Link followed" filter offers: the sequence's own
+   * rollup, and any a loaded person followed that it does not list — the
+   * rollup is capped, and a filter that could not name a destination a
+   * person followed would hide them from it.
+   */ const linkOptions = useMemo(()=>{
+        var _props_linkOptions;
+        const options = new Map();
+        for (const option of (_props_linkOptions = props.linkOptions) != null ? _props_linkOptions : [])options.set(option.value, option.label);
+        for (const summary of summaries.values()){
+            for (const url of summary.followed)if (!options.has(url)) options.set(url, url);
         }
-    };
-    if (enrollments.status === 'loading') return /*#__PURE__*/ _jsx(OutreachLoading, {
+        return [
+            ...options
+        ].map(([value, label])=>({
+                value,
+                label
+            }));
+    }, [
+        props.linkOptions,
+        summaries
+    ]);
+    const filterOptions = useMemo(()=>trackClicks ? _extends({}, BASE_FILTER_OPTIONS, {
+            clicked: CLICKED_OPTIONS,
+            link: linkOptions
+        }) : BASE_FILTER_OPTIONS, [
+        trackClicks,
+        linkOptions
+    ]);
+    const hiddenColumns = useMemo(()=>_extends({}, hiddenFilterVisibility(fields, [
+            'status',
+            'stopReason'
+        ]), trackClicks ? Object.fromEntries(CLICK_DETAIL_COLUMNS.map((column)=>[
+                column,
+                false
+            ])) : {}), [
+        fields,
+        trackClicks
+    ]);
+    /*
+   * A person who followed this destination before each click was recorded
+   * on its own, and another link after it, is known by their LAST link only
+   * — so a "Link followed" filter says it may miss them rather than
+   * implying the list is whole. Which people those are is exactly what the
+   * query cannot see, so the caveat stands whenever the filter does.
+   */ const linkFilterMayMiss = trackClicks && gridFilter.clauses.some((clause)=>clause.field === 'link');
+    const chips = /*#__PURE__*/ _jsx(ListFilterChips, {
+        fields: fields,
+        headers: ENROLLMENT_FILTER_HEADERS,
+        clauses: gridFilter.clauses,
+        onChange: gridFilter.setClauses,
+        options: filterOptions
+    });
+    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, {
@@ -375,15 +436,27 @@ const ENROLLMENT_FILTER_OPTIONS = {
     }
     const rowActions = (enrollment)=>/*#__PURE__*/ _jsx(ListRowActions, {
             label: enrollment.contactName || enrollment.email,
-            items: actionsFor(enrollment, steps).map((action)=>({
-                    key: action,
-                    label: ACTION_LABELS[action],
-                    onClick: ()=>choose(enrollment, action),
-                    destructive: action === 'stop' || action === 'do_not_contact',
-                    disabled: busy === enrollment.id
-                }))
+            items: actions.menuItems(enrollment)
         });
     const nextSend = (enrollment)=>enrollment.status === 'active' || enrollment.status === 'paused' ? formatOutreachTime(enrollment.nextDueAtMs, timeZone) : '—';
+    const personName = (enrollment)=>{
+        const name = enrollment.contactName || enrollment.email;
+        if (!hrefFor) return /*#__PURE__*/ _jsx(Typography, {
+            variant: "body2",
+            children: name
+        });
+        return /*#__PURE__*/ _jsx(Link, {
+            href: hrefFor(enrollment),
+            variant: "body2",
+            underline: "hover",
+            onClick: (event)=>{
+                if (!onOpen || !plainClick(event)) return;
+                event.preventDefault();
+                onOpen(enrollment);
+            },
+            children: name
+        });
+    };
     const person = (enrollment)=>/*#__PURE__*/ _jsxs(Stack, {
             spacing: 0,
             children: [
@@ -394,10 +467,7 @@ const ENROLLMENT_FILTER_OPTIONS = {
                         alignItems: 'center'
                     },
                     children: [
-                        /*#__PURE__*/ _jsx(Typography, {
-                            variant: "body2",
-                            children: enrollment.contactName || enrollment.email
-                        }),
+                        personName(enrollment),
                         enrollment.target === 'lead' ? /*#__PURE__*/ _jsx(Chip, {
                             size: "small",
                             variant: "outlined",
@@ -412,27 +482,23 @@ 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,
+                    headers: ENROLLMENT_FILTER_HEADERS,
+                    options: filterOptions
+                }),
+                notices: enrollments.plan.notices
             }),
-            filtering && enrollments.hasMore ? /*#__PURE__*/ _jsx(Typography, {
+            linkFilterMayMiss ? /*#__PURE__*/ _jsx(Typography, {
                 variant: "caption",
                 color: "text.secondary",
-                children: `Filtering the ${enrollments.data.length} enrollments read so far — the next page reads more.`
+                children: "Clicks made before each one was recorded on its own kept only the person’s last link, so someone who followed this link and then another back then is not listed here."
             }) : null,
             narrow ? /*#__PURE__*/ _jsx(Stack, {
                 spacing: 1,
@@ -443,7 +509,9 @@ const ENROLLMENT_FILTER_OPTIONS = {
                     m: 0
                 },
                 "aria-label": "Enrollments",
-                children: pageRows.map((enrollment)=>/*#__PURE__*/ _jsx(Card, {
+                children: pageRows.map((enrollment)=>{
+                    const clicks = clicksOf(enrollment);
+                    return /*#__PURE__*/ _jsx(Card, {
                         variant: "outlined",
                         component: "li",
                         children: /*#__PURE__*/ _jsx(CardContent, {
@@ -495,10 +563,10 @@ const ENROLLMENT_FILTER_OPTIONS = {
                                         color: "text.secondary",
                                         children: `Next send: ${nextSend(enrollment)} · Last activity: ${formatOutreachTime(lastActivityMs(enrollment), timeZone)}`
                                     }),
-                                    trackClicks && readOutreachEngagement(enrollment.engagement).clicks ? /*#__PURE__*/ _jsx(Typography, {
+                                    trackClicks && clicks.clicks ? /*#__PURE__*/ _jsx(Typography, {
                                         variant: "body2",
                                         color: "text.secondary",
-                                        children: `Clicked ${readOutreachEngagement(enrollment.engagement).clicks} ${readOutreachEngagement(enrollment.engagement).clicks === 1 ? 'time' : 'times'}`
+                                        children: `Clicks: ${outreachClickCountLabel(clicks)}`
                                     }) : null,
                                     outreachStopLabel(enrollment) ? /*#__PURE__*/ _jsx(Typography, {
                                         variant: "body2",
@@ -508,104 +576,56 @@ const ENROLLMENT_FILTER_OPTIONS = {
                                 ]
                             })
                         })
-                    }, enrollment.id))
+                    }, enrollment.id);
+                })
             }) : /*#__PURE__*/ _jsx(ListTable, {
                 "aria-label": "Enrollments",
-                columns: listFilterGridColumns(columns(rowActions, trackClicks), ENROLLMENT_FILTER_FIELDS, ENROLLMENT_FILTER_OPTIONS, ENROLLMENT_FILTER_HEADERS),
+                columns: listFilterGridColumns(columns(rowActions, trackClicks), fields, filterOptions, ENROLLMENT_FILTER_HEADERS),
                 initialState: {
                     columns: {
-                        columnVisibilityModel: ENROLLMENT_HIDDEN_COLUMNS
+                        columnVisibilityModel: hiddenColumns
                     }
                 },
-                rows: pageRows.map((enrollment)=>({
-                        $id: enrollment.id,
-                        enrollment,
-                        status: enrollment.status,
-                        target: enrollment.target === 'lead' ? 'lead' : 'contact',
-                        contactName: enrollment.contactName,
-                        email: enrollment.email,
-                        step: outreachCurrentStepLabel(enrollment, steps),
+                loading: enrollments.status === 'loading',
+                rows: pageRows.map((enrollment)=>{
+                    var _enrollment_engagement;
+                    const clicks = clicksOf(enrollment);
+                    return _extends({
+                        $id: enrollment.id
+                    }, filterRow(enrollment, steps, clicks), {
                         nextSend: nextSend(enrollment),
                         lastActivity: formatOutreachTime(lastActivityMs(enrollment), timeZone),
+                        // What the export writes; the cells draw these their own way.
+                        clicks: outreachClickCountLabel(clicks),
+                        linksFollowed: clicks.followed.join(' ') || '—',
+                        lastClick: clicks.clicks ? formatOutreachTime((_enrollment_engagement = enrollment.engagement) == null ? void 0 : _enrollment_engagement.lastClickAtMs, timeZone) : '—',
+                        scannerClicks: clicks.machineClicks ? String(clicks.machineClicks) : '—',
                         stopReason: outreachStopLabel(enrollment) || '—'
-                    })),
+                    });
+                }),
+                onOpen: onOpen ? (_id, row)=>onOpen(row.enrollment) : undefined,
                 /*
-           * 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,
-                steps: steps,
-                api: api,
-                onClose: ()=>setCurating(null)
-            }),
-            /*#__PURE__*/ _jsx(Dialog, {
-                open: Boolean(confirming),
-                onClose: ()=>setConfirming(null),
-                fullWidth: true,
-                maxWidth: "xs",
-                children: confirming ? /*#__PURE__*/ _jsxs(_Fragment, {
-                    children: [
-                        /*#__PURE__*/ _jsx(DialogTitle, {
-                            children: (_CONFIRM_confirming_action = CONFIRM[confirming.action]) == null ? void 0 : _CONFIRM_confirming_action.title
-                        }),
-                        /*#__PURE__*/ _jsx(DialogContent, {
-                            children: /*#__PURE__*/ _jsxs(Stack, {
-                                spacing: 2,
-                                children: [
-                                    /*#__PURE__*/ _jsx(DialogContentText, {
-                                        children: (_CONFIRM_confirming_action1 = CONFIRM[confirming.action]) == null ? void 0 : _CONFIRM_confirming_action1.body
-                                    }),
-                                    /*#__PURE__*/ _jsx(TextField, {
-                                        label: "Why (optional)",
-                                        value: detail,
-                                        onChange: (event)=>setDetail(event.target.value),
-                                        fullWidth: true,
-                                        slotProps: {
-                                            htmlInput: {
-                                                maxLength: 200
-                                            }
-                                        }
-                                    })
-                                ]
-                            })
-                        }),
-                        /*#__PURE__*/ _jsxs(DialogActions, {
-                            children: [
-                                /*#__PURE__*/ _jsx(Button, {
-                                    onClick: ()=>setConfirming(null),
-                                    children: "Cancel"
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    color: "error",
-                                    variant: "contained",
-                                    onClick: ()=>{
-                                        const { enrollment, action } = confirming;
-                                        setConfirming(null);
-                                        void act(enrollment, action, detail.trim() || undefined);
-                                    },
-                                    children: (_CONFIRM_confirming_action2 = CONFIRM[confirming.action]) == null ? void 0 : _CONFIRM_confirming_action2.label
-                                })
-                            ]
-                        })
-                    ]
-                }) : null
-            })
+            actions.dialogs
         ]
     });
 }