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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aglyn/plugins-marketing",
-  "version": "1.0.0-beta.198",
+  "version": "1.0.0-beta.200",
   "license": "Apache-2.0",
   "homepage": "https://aglyn.com",
   "repository": {
@@ -25,20 +25,20 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@aglyn/aglyn": "1.0.0-beta.198",
-    "@aglyn/shared-data-enums": "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-jsx-forms": "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/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-enums": "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-jsx-forms": "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/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/campaign-detail-card.js

@@ -20,11 +20,16 @@ import { mdiDeleteOutline, mdiEyeOutline, mdiPaletteOutline, mdiPencilOutline }
 import { AppLink, CardDisplay, MdiIcon, useConfirmationContext } from "@aglyn/shared-ui-jsx";
 import { Figure, RateRow, Section } from "@aglyn/shared-ui-jsx/components/measured-figures.component";
 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 { 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 RowActionsMenu from "@aglyn/shared-ui-jsx/components/row-actions-menu.component";
 import { TABLE_ROW_HEIGHT } from "@aglyn/shared-ui-jsx/const/table-pagination";
 import { ceilingedWindow } from "@aglyn/tenant-feature-instance/hooks/host-collection-queries";
+import { useListQuery } from "@aglyn/tenant-feature-instance/hooks/use-list-query";
 import { PageHeaderRecord, pluginDocsHelp } from "@aglyn/aglyn";
 import { Alert, Box, Button, Chip, Divider, MenuItem, Stack, TextField, Typography } from "@mui/material";
 import { collection, deleteField, documentId, limit, orderBy, query, updateDoc, where } from "firebase/firestore";
@@ -33,13 +38,13 @@ import { useRouter } from "next/navigation";
 import { useSnackbar } from "@aglyn/shared-ui-snackstack";
 import { useFirestore, useFirestoreCollection, useFirestoreDoc } from "@aglyn/tenant-feature-instance";
 import { campaignForcedListUnsubscribeSends, campaignListUnsubscribe, campaignRollup, campaignSendDisplay, campaignSiteIds, campaignVisibleTo, campaignWindowState, emailListTimeMs } from "@aglyn/shared-ui-email-campaigns/model";
-import { EMAIL_STATE_FILTER_FIELD, EMAIL_STATE_OPTIONS, EMAIL_SUBJECT_FILTER_FIELD, emailFilterValues } from "./email-send-filter.js";
+import { CAMPAIGN_EMAILS_QUERY, CAMPAIGN_SEND_STATUS_OPTIONS, campaignContainerSearchFields, campaignSendsScope } from "../model/campaign-list-query.js";
 import CampaignComposer from "./campaign-composer.js";
 import CampaignEditDrawer from "./campaign-edit-drawer.js";
 import { CampaignConversionsSection, CampaignDestinationsSection, CampaignRevenueSection, CampaignSequencesSection } from "./campaign-reach-sections.js";
 import CampaignMembersSection from "./campaign-members-section.js";
 import CampaignReportCard from "./campaign-report-card.js";
-import { campaignContainerDoc, campaignSendsQuery } from "./campaign-queries.js";
+import { campaignContainerDoc, campaignSendsCollection, campaignSendsQuery } from "./campaign-queries.js";
 import { orgSiteHubPath, orgSiteName, orgSiteOptions, topicCatalogHostId, useMarketingOrgId, useMarketingOrgMount } from "./marketing-org-mount.js";
 import { useCampaignManageApi } from "./use-campaign-send-api.js";
 import { useEmailsHubPath } from "./use-emails-hub-path.js";
@@ -61,20 +66,20 @@ const detailDocsHelp = pluginDocsHelp('emailCampaigns', {
         value: value.value,
         note: value.value !== null && value.recorded < value.sends ? `across ${value.recorded} of ${value.sends} emails` : `across ${value.sends} email${value.sends === 1 ? '' : 's'}`
     });
-/* What the campaign's emails table filters by (AGL-3317). */ const SEND_FILTER_FIELDS = [
-    EMAIL_SUBJECT_FILTER_FIELD,
-    EMAIL_STATE_FILTER_FIELD
-];
+/*
+ * What the campaign's emails table filters by, each clause and the search on
+ * the table's own Firestore query (AGL-3321, `CAMPAIGN_EMAILS_QUERY`). The
+ * State column is derived from an email's counters and cannot be asked of a
+ * query, so the panel offers the Status it stores.
+ */ const SEND_FILTER_FIELDS = CAMPAIGN_EMAILS_QUERY.fields;
 const SEND_FILTER_OPTIONS = {
-    state: EMAIL_STATE_OPTIONS
+    status: CAMPAIGN_SEND_STATUS_OPTIONS
 };
 const SEND_FILTER_HEADERS = {
     subject: 'Subject',
-    state: 'State'
+    status: 'Status',
+    createdAtMs: 'Created'
 };
-const SEND_SEARCH_FIELDS = [
-    'subjectText'
-];
 /**
  * ONE CAMPAIGN: its lists, what it caused, what it earned, where it sent
  * people, and the emails it did all of that with.
@@ -232,17 +237,43 @@ const SEND_SEARCH_FIELDS = [
         sends
     ]);
     /*
-   * The emails table's Filters panel and search (AGL-3317), answered over
-   * every email the card read — the same window the figures above cover.
-   */ const sendFilterRows = useMemo(()=>sends.map((send)=>_extends({}, send, emailFilterValues(send))), [
-        sends
-    ]);
-    const sendFilter = useListRowsFilter({
-        rows: sendFilterRows,
-        fields: SEND_FILTER_FIELDS,
-        options: SEND_FILTER_OPTIONS,
-        headers: SEND_FILTER_HEADERS,
-        search: SEND_SEARCH_FIELDS
+   * THE EMAILS TABLE IS ITS OWN QUERY (AGL-3321).
+   *
+   * The figures above are a sum over the window read above; the table under
+   * them is a list a reader filters and searches, so each clause and the
+   * search word go onto a query of their own — this campaign's emails
+   * (`emailCampaignId == id`, and under a site the ones sent as it), newest
+   * first, paged by the query. A match on the fifth page is found; nothing
+   * is matched over the rows a read happened to hold. Gated on the container
+   * like the window: a single send's report reads none of it.
+   */ const gridFilter = useListGridFilter({
+        selectFields: [
+            'status'
+        ]
+    });
+    const sendPage = useListQuery({
+        collection: campaign ? campaignSendsCollection(firestore, orgId) : null,
+        declaration: CAMPAIGN_EMAILS_QUERY,
+        request: {
+            clauses: gridFilter.clauses,
+            search: gridFilter.searchWords,
+            base: [
+                {
+                    path: 'emailCampaignId',
+                    op: '==',
+                    value: campaignId
+                },
+                ...campaignSendsScope(hostId)
+            ]
+        },
+        deps: [
+            firestore,
+            orgId,
+            hostId,
+            campaignId,
+            Boolean(campaign)
+        ],
+        idField: '$id'
     });
     // The ids the two sections beneath the figures join on. Derived from the
     // window this card already holds, so neither of them reads the send list
@@ -278,16 +309,18 @@ const SEND_SEARCH_FIELDS = [
         setSaving(true);
         setSaveError(null);
         try {
+            const placement = !hostId && values.siteIds !== undefined ? {
+                visibleTo: campaignVisibleTo(values.siteIds)
+            } : {};
             await updateDoc(campaignContainerDoc(firestore, orgId, campaignId), _extends({
-                name: values.name,
+                name: values.name
+            }, campaignContainerSearchFields(values.name), {
                 startAtMs: values.startAtMs,
                 endAtMs: values.endAtMs,
                 listIds: values.listIds,
                 topicId: values.topicId ? values.topicId : deleteField(),
                 listUnsubscribe: values.listUnsubscribe
-            }, !hostId && values.siteIds !== undefined ? {
-                visibleTo: campaignVisibleTo(values.siteIds)
-            } : {}));
+            }, placement));
             setEditing(false);
             enqueueSnackbar('Campaign updated', {
                 variant: 'success',
@@ -470,7 +503,7 @@ const SEND_SEARCH_FIELDS = [
    * The campaign's emails, on the surface's own row grammar: the row opens
    * the email's report, its subject is also a real link so it can be
    * middle-clicked and copied, and the trailing cluster holds the actions.
-   * The window is one the card already holds, so the grid pages it.
+   * A page of the table's own query, paged by that query.
    */ const sendColumns = [
         {
             field: 'subject',
@@ -845,22 +878,59 @@ const SEND_SEARCH_FIELDS = [
                     sends.length ? /*#__PURE__*/ _jsxs(Stack, {
                         spacing: 0.5,
                         children: [
-                            /*#__PURE__*/ _jsx(ListFilterChips, _extends({}, sendFilter.chipsProps)),
-                            /*#__PURE__*/ _jsx(ListTable, _extends({
+                            /*#__PURE__*/ _jsx(ListFilterChips, {
+                                fields: SEND_FILTER_FIELDS,
+                                headers: SEND_FILTER_HEADERS,
+                                clauses: gridFilter.clauses,
+                                onChange: gridFilter.setClauses,
+                                options: SEND_FILTER_OPTIONS
+                            }),
+                            /*#__PURE__*/ _jsx(ListQueryNotices, {
+                                refused: listQueryRefusals(sendPage.plan.refused, {
+                                    fields: SEND_FILTER_FIELDS,
+                                    headers: SEND_FILTER_HEADERS,
+                                    options: SEND_FILTER_OPTIONS
+                                }),
+                                notices: sendPage.plan.notices
+                            }),
+                            /*#__PURE__*/ _jsx(ListTable, {
                                 "aria-label": "The campaign's emails",
-                                rows: sendFilter.rows,
-                                columns: sendFilter.filterColumns(sendColumns),
+                                rows: sendPage.rows,
+                                columns: listFilterGridColumns(sendColumns, SEND_FILTER_FIELDS, SEND_FILTER_OPTIONS, SEND_FILTER_HEADERS),
                                 rowHeight: TABLE_ROW_HEIGHT,
                                 onOpen: (_id, send)=>{
                                     const href = sendHref(send);
                                     if (href) router.push(href);
-                                }
-                            }, sendFilter.gridProps, {
+                                },
+                                loading: sendPage.status === 'loading',
+                                /*
+               * The panel and the search are the grid's; every clause and the
+               * search word are on the table'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: hiddenFilterVisibility(SEND_FILTER_FIELDS, sendColumns.map((column)=>String(column.field)))
+                                    }
+                                },
                                 noRowsLabel: "No emails match these filters"
-                            })),
+                            }),
+                            /*#__PURE__*/ _jsx(ListPagination, {
+                                page: sendPage.page,
+                                pageSize: sendPage.pageSize,
+                                rowCount: sendPage.rows.length,
+                                hasMore: sendPage.hasMore,
+                                onPageChange: sendPage.setPage,
+                                onPageSizeChange: sendPage.setPageSize
+                            }),
                             sendsTruncated ? /*#__PURE__*/ _jsx(Alert, {
                                 severity: "info",
-                                children: `Showing ${CAMPAIGN_EMAIL_CEILING} of this campaign's ` + 'emails. It has sent more — the ones listed are not ' + 'necessarily the most recent, because a send carries no ' + 'date field that every writer stamps, and the figures above ' + 'cover the emails listed.'
+                                children: `The figures above cover ${CAMPAIGN_EMAIL_CEILING} of this ` + 'campaign’s emails. It has sent more; the table lists ' + 'every one of them.'
                             }) : null
                         ]
                     }) : /*#__PURE__*/ _jsx(Typography, {