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

package/src/lib/components/campaigns-card.js

@@ -22,32 +22,38 @@ import { buildRoute, createResourceUid, pluginDocsHelp, Route } from "@aglyn/agl
  * `@aglyn/tenant-feature-instance` wholesale to stage its Firestore hooks
  * would otherwise lose them, and neither is a hook.
  */ import { ceilingedWindow, collectionCeiling } from "@aglyn/tenant-feature-instance/hooks/host-collection-queries";
+import { useListQuery } from "@aglyn/tenant-feature-instance/hooks/use-list-query";
 import { mdiDeleteOutline, mdiEyeOutline } from "@aglyn/shared-data-mdi";
 import { AppLink, CardDisplay, MdiIcon, useConfirmationContext } 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 { ListRowActions, ListTable, listActionsColumn } from "@aglyn/shared-ui-jsx/components/list-table.component";
-import { inMemoryListField } from "@aglyn/shared-ui-jsx/const/list-grid-filter";
-import { useListRowsFilter } from "@aglyn/shared-ui-jsx/hooks/use-list-rows-filter";
+import { hiddenFilterVisibility } from "@aglyn/shared-ui-jsx/const/list-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 { Alert, Button, Chip, Stack, Typography } from "@mui/material";
-import { collection, limit, query, setDoc } from "firebase/firestore";
+import { Alert, Button, Chip, Stack, ToggleButton, ToggleButtonGroup, Typography } from "@mui/material";
+import { collection, limit, query, setDoc, where } from "firebase/firestore";
 import { useCallback, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useConsoleHostRoute, useFirestore, useFirestoreCollection, useUser } from "@aglyn/tenant-feature-instance";
 import { campaignListRows, campaignSiteIds, campaignVisibleTo } from "@aglyn/shared-ui-email-campaigns/model";
 import { CreateArtifactDrawer } from "@aglyn/shared-ui-jsx-forms";
-import { campaignContainerDoc, campaignContainersQuery, campaignSendsQuery } from "./campaign-queries.js";
+import { CAMPAIGN_SITE_SEARCH_NOTICE, SINGLE_SENDS_BASE, campaignContainerSearchFields, campaignContainersListQuery, campaignContainersScope, campaignSendsScope, campaignSingleSendsListQuery, campaignSiteSearchClause } from "../model/campaign-list-query.js";
+import { campaignContainerDoc, campaignContainersCollection, campaignSendsCollection } from "./campaign-queries.js";
 import { orgSiteName, orgSiteOptions, topicCatalogHostId, useMarketingOrgId, useMarketingOrgMount } from "./marketing-org-mount.js";
 import { useCampaignManageApi } from "./use-campaign-send-api.js";
 import { useCampaignTopicOptions } from "./use-campaign-topic-options.js";
 /**
- * How many sends the list reads.
+ * How many emails one read of a page's campaigns covers, for their figures.
  *
- * A CEILING, not a page size — see the query, which explains why this list
- * cannot be paged by the server until a send carries one date field every
- * writer stamps.
- */ const CAMPAIGN_CEILING = 30;
-/** How many campaign containers the list reads. */ const CONTAINER_CEILING = 50;
+ * A ceiling on the ROLLUP read, not on the list: the list is paged by its
+ * own query, and this reads the emails of the campaigns on the page on
+ * screen, thirty campaigns to a read (`in` takes thirty ids), so the largest
+ * page is two reads of this many. Past it, the figures say so.
+ */ const ROLLUP_CEILING = 50;
+/** Firestore's cap on an `in` clause's values. */ const IN_LIMIT = 30;
 const formatDay = (ms)=>ms === null ? '' : new Date(ms).toLocaleDateString();
 /** A rolled-up figure, or an em dash where nothing recorded one. */ const figure = (value)=>value.value === null ? '—' : value.value.toLocaleString();
 const WINDOW_LABEL = {
@@ -57,44 +63,21 @@ const WINDOW_LABEL = {
     ended: 'Ended'
 };
 /*
- * What the campaigns grid's Filters panel offers (AGL-3317). The card reads
- * every campaign under its ceiling, so the panel and the search answer over
- * all of them. A campaign's lists are ids, matched member by member.
- */ const CAMPAIGN_FILTER_FIELDS = [
-    inMemoryListField('name', 'text'),
-    inMemoryListField('windowState', 'select'),
-    _extends({}, inMemoryListField('listIds', 'select'), {
-        tokensPath: 'listIds',
-        verbatimTokens: true
-    }),
-    inMemoryListField('kind', 'select'),
-    inMemoryListField('sitesLabel', 'text')
-];
-const CAMPAIGN_FILTER_HEADERS = {
+ * What the campaigns grid's Filters panel offers, each clause and the search
+ * on the list's Firestore query (AGL-3321, `campaignContainersListQuery` and
+ * `campaignSingleSendsListQuery`). The Window column is derived from a
+ * campaign's dates against the clock, which no query can ask, so it is not
+ * offered; the one date range is Created, the list's own order.
+ */ const CAMPAIGN_FILTER_HEADERS = {
     name: 'Campaign',
-    windowState: 'Window',
     listIds: 'Lists',
-    kind: 'Kind',
-    sitesLabel: 'Sites'
+    sitesLabel: 'Sites',
+    createdAtMs: 'Created'
+};
+const NO_CLAUSES = {
+    campaign: [],
+    single: []
 };
-const CAMPAIGN_KIND_OPTIONS = [
-    {
-        value: 'campaign',
-        label: 'Campaign'
-    },
-    {
-        value: 'single',
-        label: 'Single send'
-    }
-];
-const CAMPAIGN_WINDOW_OPTIONS = Object.keys(WINDOW_LABEL).map((state)=>({
-        value: state,
-        label: WINDOW_LABEL[state]
-    }));
-/** What the quick search reads on a campaign row. */ const CAMPAIGN_SEARCH_FIELDS = [
-    'name',
-    'sitesLabel'
-];
 /**
  * THE CAMPAIGNS LIST.
  *
@@ -103,12 +86,14 @@ const CAMPAIGN_WINDOW_OPTIONS = Object.keys(WINDOW_LABEL).map((state)=>({
  * messages. Composing is not here: a message belongs to a campaign, and the
  * campaign's own page is where one is written.
  *
- * The rows come from two collections, and the second is why this reads
- * without a migration. `emailCampaigns` holds the containers.
- * `campaigns` holds every send, including thousands written before containers
- * existed; those carry no container id, and `campaignListRows` presents each
- * as a campaign of one rather than dropping it. Nothing is rewritten, so no
- * unsubscribe link and no pasted report URL stops resolving.
+ * The rows come from two collections. `emailCampaigns` holds the
+ * containers. `campaigns` holds every send, including thousands written
+ * before containers existed; those carry no container (`emailCampaignId`
+ * null), and `campaignListRows` presents each as a campaign of one rather
+ * than dropping it. The two are two queries, so the table lists one kind at a
+ * time — Campaigns or Single sends — each paged by its own query (AGL-3321).
+ * No send is re-filed, so no unsubscribe link and no pasted report URL stops
+ * resolving.
  *
  * ## At two levels
  *
@@ -134,42 +119,132 @@ const CAMPAIGN_WINDOW_OPTIONS = Object.keys(WINDOW_LABEL).map((state)=>({
     const { orgId } = useMarketingOrgId(hostId);
     // A container is the org's, so deleting one from the org hub names the org.
     const manageApi = useCampaignManageApi(hostId, orgId);
-    /*
-   * ORDERED AND CEILINGED, and not orderable on any DATE.
+    /*==========================================
+   * TWO KINDS OF ROW, EACH ITS OWN QUERY (AGL-3321).
    *
-   * No field here is on every send: a sent one is written `{status:'sent',
-   * sentAt}` and a scheduled one `{status:'scheduled', sendAtMs}`, by the two
-   * branches of `campaign-send.ts`, and there is no `createdAt` at all.
-   * `orderBy` on either would not mis-sort the list, it would DROP half of it.
+   * A campaign is a CONTAINER (`emailCampaigns`); a single send is an email
+   * filed under none (`campaigns` where `emailCampaignId == null`). The two
+   * live in different collections, and one Firestore query reads one
+   * collection — so a table that merged them could page neither, and every
+   * filter would be matched over whatever window of each it happened to
+   * hold. The toggle above the table picks the kind, and the table shows a
+   * page of that kind's query: newest first on `createdAtMs`, every clause
+   * and the search word on the query, paged by it. Same table, same
+   * columns; a single send still reads as a campaign of one.
    *
-   * A bare `limit(30)` is answered in DOCUMENT-ID order, so the window is
-   * thirty sends chosen by id and then sorted by date, which reads as the most
-   * recent thirty and is not. `collectionCeiling` returns that same thirty —
-   * document-id order is what the bare cap already gave — but it says so,
-   * which is what stops the next edit reaching for `sentAt`, and it probes one
-   * past the ceiling so the reader is told the history is longer.
-   */ const { data: sendDocs } = useFirestoreCollection(()=>{
-        const sends = campaignSendsQuery(firestore, orgId, hostId);
-        return sends ? collectionCeiling(sends, CAMPAIGN_CEILING) : null;
-    }, [
+   * Each kind keeps its own clauses (their Sites values differ: a campaign
+   * is asked by scope token, a send by the site it was sent as); the search
+   * words are the reader's and carry across.
+   *=========================================*/ const [kind, setKind] = useState('campaign');
+    const [clausesByKind, setClausesByKind] = useState(NO_CLAUSES);
+    const [searchWords, setSearchWords] = useState([]);
+    const setKindClauses = useCallback((next)=>setClausesByKind((current)=>_extends({}, current, {
+                [kind]: next
+            })), [
+        kind
+    ]);
+    const gridFilter = useListGridFilter({
+        clauses: clausesByKind[kind],
+        onChange: setKindClauses,
+        selectFields: [
+            'listIds',
+            'sitesLabel'
+        ],
+        search: {
+            words: searchWords,
+            onChange: setSearchWords
+        }
+    });
+    const containerDeclaration = campaignContainersListQuery(!hostId);
+    const singleDeclaration = campaignSingleSendsListQuery(!hostId);
+    const declaration = kind === 'campaign' ? containerDeclaration : singleDeclaration;
+    /*
+   * A site's campaigns are searched by the START of the name: a range beside
+   * the site's scope clause, the one array clause the rules can prove for a
+   * site collaborator (see `campaign-list-query.ts`). The org hub keeps the
+   * word search.
+   */ const siteSearch = hostId && kind === 'campaign' ? campaignSiteSearchClause(gridFilter.searchWords) : null;
+    const containerPage = useListQuery({
+        collection: kind === 'campaign' ? campaignContainersCollection(firestore, orgId) : null,
+        declaration: containerDeclaration,
+        request: {
+            clauses: kind === 'campaign' ? siteSearch ? [
+                siteSearch,
+                ...gridFilter.clauses
+            ] : gridFilter.clauses : [],
+            search: hostId ? [] : gridFilter.searchWords,
+            base: campaignContainersScope(hostId)
+        },
+        deps: [
+            firestore,
+            orgId,
+            hostId,
+            kind
+        ],
+        idField: '$id'
+    });
+    const singlePage = useListQuery({
+        collection: kind === 'single' ? campaignSendsCollection(firestore, orgId) : null,
+        declaration: singleDeclaration,
+        request: {
+            clauses: kind === 'single' ? gridFilter.clauses : [],
+            search: gridFilter.searchWords,
+            base: [
+                SINGLE_SENDS_BASE,
+                ...campaignSendsScope(hostId)
+            ]
+        },
+        deps: [
+            firestore,
+            orgId,
+            hostId,
+            kind
+        ],
+        idField: '$id'
+    });
+    const page = kind === 'campaign' ? containerPage : singlePage;
+    const filtering = gridFilter.clauses.length > 0 || gridFilter.searchWords.some((word)=>word.trim());
+    /*
+   * THE FIGURES OF THE CAMPAIGNS ON THE PAGE ON SCREEN.
+   *
+   * A container stores no counters; its row sums the emails filed under it.
+   * Those are read for the page's campaigns only — `emailCampaignId in` the
+   * ids on screen, thirty to a read, and under a site the ones sent as it —
+   * and never used to filter: the page is already the query's answer. Past
+   * `ROLLUP_CEILING` emails a read stops, and the table says the figures
+   * are partial.
+   */ const pageIds = useMemo(()=>kind === 'campaign' ? containerPage.rows.map((row)=>String(row.$id)) : [], [
+        kind,
+        containerPage.rows
+    ]);
+    const rollupRead = (ids)=>()=>{
+            const sends = campaignSendsCollection(firestore, orgId);
+            if (!sends || !ids.length) return null;
+            return collectionCeiling(query(sends, where('emailCampaignId', 'in', ids), ...hostId ? [
+                where('hostId', '==', hostId)
+            ] : []), ROLLUP_CEILING);
+        };
+    const firstIds = pageIds.slice(0, IN_LIMIT);
+    const restIds = pageIds.slice(IN_LIMIT, IN_LIMIT * 2);
+    const { data: firstSendDocs } = useFirestoreCollection(rollupRead(firstIds), [
         firestore,
         orgId,
-        hostId
+        hostId,
+        firstIds.join(',')
     ], {
         idField: '$id'
     });
-    const { rows: readSends, truncated: sendsTruncated } = ceilingedWindow(sendDocs, CAMPAIGN_CEILING);
-    const { data: campaignDocs } = useFirestoreCollection(()=>{
-        const containers = campaignContainersQuery(firestore, orgId, hostId);
-        return containers ? collectionCeiling(containers, CONTAINER_CEILING) : null;
-    }, [
+    const { data: restSendDocs } = useFirestoreCollection(rollupRead(restIds), [
         firestore,
         orgId,
-        hostId
+        hostId,
+        restIds.join(',')
     ], {
         idField: '$id'
     });
-    const { rows: readCampaigns, truncated: campaignsTruncated } = ceilingedWindow(campaignDocs, CONTAINER_CEILING);
+    const firstSends = ceilingedWindow(firstSendDocs, ROLLUP_CEILING);
+    const restSends = ceilingedWindow(restSendDocs, ROLLUP_CEILING);
+    const rollupTruncated = firstSends.truncated || restSends.truncated;
     // Org email lists, so a row can name what it is aimed at rather than
     // showing ids.
     const { data: listDocs } = useFirestoreCollection(()=>orgId ? query(collection(firestore, 'orgs', orgId, 'lists'), limit(50)) : null, [
@@ -216,40 +291,66 @@ const CAMPAIGN_WINDOW_OPTIONS = Object.keys(WINDOW_LABEL).map((state)=>({
         }), [
         listDocs
     ]);
-    const rows = useMemo(()=>{
-        const campaigns = readCampaigns.filter((campaign)=>!campaign.deletedAt);
-        const byId = new Map(campaigns.map((campaign)=>[
-                campaign.$id,
-                campaign
+    /*
+   * The page's rows, in the QUERY's order. `campaignListRows` builds each
+   * row — a container with its emails summed, or a single send as a
+   * campaign of one — and sorts by date, which is not this list's order, so
+   * the page is put back in the order the query returned it.
+   */ const rows = useMemo(()=>{
+        const read = page.rows;
+        const order = new Map(read.map((row, at)=>[
+                String(row.$id),
+                at
+            ]));
+        const built = kind === 'campaign' ? campaignListRows(read, [
+            ...firstSends.rows,
+            ...restSends.rows
+        ], Date.now()) : campaignListRows([], read, Date.now());
+        const byId = new Map(read.map((row)=>[
+                String(row.$id),
+                row
             ]));
-        return campaignListRows(campaigns, readSends, Date.now()).map((row)=>_extends({}, row, {
+        return built.filter((row)=>order.has(row.id)).sort((a, b)=>{
+            var _order_get, _order_get1;
+            return ((_order_get = order.get(a.id)) != null ? _order_get : 0) - ((_order_get1 = order.get(b.id)) != null ? _order_get1 : 0);
+        }).map((row)=>_extends({}, row, {
                 $id: row.id,
-                kind: row.legacy ? 'single' : 'campaign',
                 sitesLabel: orgMount ? campaignSitesLabel(orgMount, row, byId.get(row.id)) : ''
             }));
     }, [
-        readCampaigns,
-        readSends,
+        kind,
+        page.rows,
+        firstSends.rows,
+        restSends.rows,
         orgMount
     ]);
-    const filterOptions = useMemo(()=>({
-            windowState: CAMPAIGN_WINDOW_OPTIONS,
+    /*
+   * The choices the picked fields offer. A campaign's Sites are asked by
+   * scope token — `org` is placed on every site — and a single send's by
+   * the site it was sent as.
+   */ const filterOptions = useMemo(()=>{
+        if (!orgMount) return {};
+        const sites = orgSiteOptions(orgMount);
+        return kind === 'campaign' ? {
             listIds: listOptions,
-            kind: CAMPAIGN_KIND_OPTIONS
-        }), [
-        listOptions
-    ]);
-    // Sites is a column on the org hub only; under a site it would say one thing.
-    const filterFields = useMemo(()=>orgMount ? CAMPAIGN_FILTER_FIELDS : CAMPAIGN_FILTER_FIELDS.filter((field)=>field.column !== 'sitesLabel'), [
+            sitesLabel: [
+                {
+                    value: 'org',
+                    label: 'Every site'
+                },
+                ...sites.map((site)=>({
+                        value: `host:${site.value}`,
+                        label: site.label
+                    }))
+            ]
+        } : {
+            sitesLabel: sites
+        };
+    }, [
+        kind,
+        listOptions,
         orgMount
     ]);
-    const listFilter = useListRowsFilter({
-        rows,
-        fields: filterFields,
-        options: filterOptions,
-        headers: CAMPAIGN_FILTER_HEADERS,
-        search: CAMPAIGN_SEARCH_FIELDS
-    });
     const [createError, setCreateError] = useState(null);
     const [creating, setCreating] = useState(false);
     /** The campaign a delete is in flight for, so its row menu can say so. */ const [deletingId, setDeletingId] = useState('');
@@ -286,11 +387,19 @@ const CAMPAIGN_WINDOW_OPTIONS = Object.keys(WINDOW_LABEL).map((state)=>({
         setCreating(true);
         setCreateError(null);
         const id = createResourceUid();
+        /*
+       * Where it is placed. From a site's hub, that site — the creator is
+       * standing on it, and a campaign that appeared on every sibling site
+       * would be a decision nobody made. From the org hub, the sites picked,
+       * and every site when none are.
+       */ const visibleTo = campaignVisibleTo(hostId ? [
+            hostId
+        ] : Array.isArray(values.siteIds) ? values.siteIds.map(String) : null);
         try {
             var _ref;
             await setDoc(campaignContainerDoc(firestore, orgId, id), _extends({
                 name
-            }, Number.isFinite(startAtMs) && startAtMs !== null ? {
+            }, campaignContainerSearchFields(name), Number.isFinite(startAtMs) && startAtMs !== null ? {
                 startAtMs
             } : {}, Number.isFinite(endAtMs) && endAtMs !== null ? {
                 endAtMs
@@ -299,14 +408,7 @@ const CAMPAIGN_WINDOW_OPTIONS = Object.keys(WINDOW_LABEL).map((state)=>({
             }, values.topicId ? {
                 topicId: String(values.topicId)
             } : {}, {
-                /*
-           * Where it is placed. From a site's hub, that site — the creator is
-           * standing on it, and a campaign that appeared on every sibling
-           * site would be a decision nobody made. From the org hub, the sites
-           * picked, and every site when none are.
-           */ visibleTo: campaignVisibleTo(hostId ? [
-                    hostId
-                ] : Array.isArray(values.siteIds) ? values.siteIds.map(String) : null),
+                visibleTo,
                 createdAtMs: Date.now(),
                 createdBy: String((_ref = user == null ? void 0 : user.uid) != null ? _ref : '')
             }));
@@ -663,6 +765,7 @@ const CAMPAIGN_WINDOW_OPTIONS = Object.keys(WINDOW_LABEL).map((state)=>({
         handleDelete,
         orgMount
     ]);
+    /** Nothing of this kind stored at all — not a filter that matched nothing. */ const none = page.status !== 'loading' && !rows.length && !filtering && page.page === 0;
     return /*#__PURE__*/ _jsxs(CardDisplay, {
         header: 'Campaigns',
         help: pluginDocsHelp('emailCampaigns', {
@@ -687,35 +790,90 @@ const CAMPAIGN_WINDOW_OPTIONS = Object.keys(WINDOW_LABEL).map((state)=>({
             /*#__PURE__*/ _jsxs(Stack, {
                 spacing: 1.5,
                 children: [
-                    /*#__PURE__*/ _jsx(ListFilterChips, _extends({}, listFilter.chipsProps)),
-                    /*#__PURE__*/ _jsx(ListTable, _extends({
-                        rows: listFilter.rows,
-                        columns: listFilter.filterColumns(columns),
-                        onOpen: (id)=>openCampaign(id)
-                    }, listFilter.gridProps, {
+                    /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
+                        exclusive: true,
+                        size: "small",
+                        value: kind,
+                        onChange: (_event, next)=>{
+                            if (next) setKind(next);
+                        },
+                        "aria-label": "Which rows the table lists",
+                        sx: {
+                            alignSelf: 'flex-start'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(ToggleButton, {
+                                value: "campaign",
+                                children: 'Campaigns'
+                            }),
+                            /*#__PURE__*/ _jsx(ToggleButton, {
+                                value: "single",
+                                children: 'Single sends'
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(ListFilterChips, {
+                        fields: declaration.fields,
+                        headers: CAMPAIGN_FILTER_HEADERS,
+                        clauses: gridFilter.clauses,
+                        onChange: gridFilter.setClauses,
+                        options: filterOptions
+                    }),
+                    /*#__PURE__*/ _jsx(ListQueryNotices, {
+                        refused: listQueryRefusals(page.plan.refused, {
+                            fields: declaration.fields,
+                            headers: CAMPAIGN_FILTER_HEADERS,
+                            options: filterOptions
+                        }),
+                        notices: siteSearch ? [
+                            CAMPAIGN_SITE_SEARCH_NOTICE,
+                            ...page.plan.notices
+                        ] : page.plan.notices
+                    }),
+                    /*#__PURE__*/ _jsx(ListTable, {
+                        rows: rows,
+                        columns: listFilterGridColumns(columns, declaration.fields, filterOptions, CAMPAIGN_FILTER_HEADERS),
+                        onOpen: (id)=>openCampaign(id),
+                        loading: page.status === 'loading',
+                        /*
+           * The panel and the search are the grid's; every clause and the
+           * search word are on the list's query (AGL-3321), and the grid
+           * neither filters nor sorts the page it is handed.
+           */ filterMode: "server",
+                        filterModel: gridFilter.filterModel,
+                        onFilterModelChange: gridFilter.onFilterModelChange,
+                        quickFilter: true,
+                        disableColumnSorting: true,
+                        hideFooter: true,
                         initialState: {
                             columns: {
-                                columnVisibilityModel: {
-                                    kind: false
-                                }
+                                columnVisibilityModel: hiddenFilterVisibility(declaration.fields, columns.map((column)=>column.field))
                             }
                         },
-                        noRowsLabel: rows.length ? 'No campaigns match these filters' : 'No campaigns yet',
-                        noRowsDescription: rows.length ? undefined : 'A campaign groups the emails you send to a set of lists.',
-                        noRowsAction: rows.length ? undefined : /*#__PURE__*/ _jsx(Button, {
+                        noRowsLabel: none ? kind === 'campaign' ? 'No campaigns yet' : 'No single sends' : kind === 'campaign' ? 'No campaigns match these filters' : 'No single sends match these filters',
+                        noRowsDescription: none ? kind === 'campaign' ? 'A campaign groups the emails you send to a set of lists.' : 'An email filed under no campaign is listed here.' : undefined,
+                        noRowsAction: none && kind === 'campaign' ? /*#__PURE__*/ _jsx(Button, {
                             variant: "contained",
                             onClick: ()=>setCreateOpen(true),
                             children: 'Create campaign'
-                        })
-                    })),
+                        }) : undefined
+                    }),
+                    /*#__PURE__*/ _jsx(ListPagination, {
+                        page: page.page,
+                        pageSize: page.pageSize,
+                        rowCount: rows.length,
+                        hasMore: page.hasMore,
+                        onPageChange: page.setPage,
+                        onPageSizeChange: page.setPageSize
+                    }),
                     /*#__PURE__*/ _jsx(Typography, {
                         variant: "caption",
                         color: "text.secondary",
                         children: 'These figures measure each campaign’s mail. What a campaign ' + 'caused — the form submissions, leads, contacts and bookings ' + 'credited to it — and the pages it sent people to are on the ' + 'campaign’s own page.'
                     }),
-                    sendsTruncated || campaignsTruncated ? /*#__PURE__*/ _jsx(Alert, {
+                    rollupTruncated ? /*#__PURE__*/ _jsx(Alert, {
                         severity: "info",
-                        children: `Showing the most recent ${CONTAINER_CEILING} campaigns and ` + `${CAMPAIGN_CEILING} sends. ${hostId ? 'This site' : 'This organization'} has more — the ones ` + 'listed are not necessarily the most recent, because a send ' + 'carries no date field that every writer stamps.'
+                        children: `The campaigns on this page hold more than ${ROLLUP_CEILING} ` + 'emails between them, so their figures count the first ' + `${ROLLUP_CEILING} read.`
                     }) : null
                 ]
             }),