@aglyn/plugins-crm 1.0.0-beta.182 → 1.0.0-beta.184

package/src/lib/components/leads-section.js

@@ -17,7 +17,7 @@
 import { _ as _extends } from "@swc/helpers/_/_extends";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as Aglyn from "@aglyn/aglyn";
-import { mdiAccountArrowRight, mdiAccountCancelOutline, mdiAccountConvertOutline, mdiAccountTieOutline, mdiMagnify } from "@aglyn/shared-data-mdi";
+import { mdiAccountArrowRight, mdiAccountCancelOutline, mdiAccountConvertOutline, mdiAccountTieOutline } from "@aglyn/shared-data-mdi";
 import { CardDisplay, MdiIcon } from "@aglyn/shared-ui-jsx";
 import { ListPagination } from "@aglyn/shared-ui-jsx/components/list-pagination.component";
 import { ListTable } from "@aglyn/shared-ui-jsx/components/list-table.component";
@@ -39,13 +39,16 @@ import { TABLE_PAGE_SIZE_DEFAULT } from "@aglyn/shared-ui-jsx/const/table-pagina
 import EmptyStateComponent from "@aglyn/shared-ui-jsx/components/empty-state.component";
 import { useSnackbar } from "@aglyn/shared-ui-snackstack";
 import { useFirestore, useFirestoreCollection } from "@aglyn/tenant-feature-instance";
-import { Alert, Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, InputAdornment, InputLabel, MenuItem, Select, Stack, TextField, Typography } from "@mui/material";
+import { Alert, Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, MenuItem, Select, Stack, Typography } from "@mui/material";
 import { collection, deleteField, doc, limit, orderBy, query, serverTimestamp, updateDoc, where } from "firebase/firestore";
 import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useId, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { downloadTextFile } from "../model/contacts-csv.js";
 import { crmRoutes } from "../model/crm-routes.js";
-import { LEAD_FILTER_LABELS, LEAD_EMAIL_FILTER_LABELS, LEAD_EMAIL_FILTERS, LEAD_FILTERS, leadMatchesCampaignFilter, leadMatchesEmailFilter, leadMatchesFilter, leadMatchesLeadSourceFilter, leadMatchesSearch, LEAD_SOURCE_FILTER_NONE } from "../model/lead-filters.js";
+import { LEAD_EMAIL_FILTER_OPTIONS, LEAD_FILTER_CODECS, LEAD_LIST_FILTER_FIELDS, LEAD_LIST_FILTER_HEADERS, LEAD_SOURCE_FILTER_NONE, LEAD_STATUS_FILTER_OPTIONS, leadClausesForGrid, leadClausesToStore, leadMatchesClauses, leadMatchesSearch } from "../model/lead-filters.js";
+import { crmFilterColumns } from "../model/crm-grid-filter.js";
+import { useCrmGridFilter } from "../hooks/use-crm-grid-filter.js";
+import CrmFilterBar from "./crm-filter-bar.js";
 import { useLeadSourcePicklist } from "../hooks/use-lead-source-picklist.js";
 import { leadsCsv } from "../model/leads-csv.js";
 import { LeadConvertDialog } from "./lead-convert-dialog.js";
@@ -160,117 +163,33 @@ import OrgLeadSurfacesNote from "./org-lead-surfaces-note.js";
         leadDocs
     ]);
     /*
-   * The `Show` filter is the saved VIEW'S (AGL-2617): a saved view of leads
-   * holds the status beside the columns and the sort, and the select below
-   * writes into it. Unset reads as `open`, which is what the section opened
-   * on before views existed and the one reading a query cannot express.
+   * What the list is narrowed by is the saved VIEW'S (AGL-2617), and the
+   * grid's own Filters panel and quick search edit it (AGL-3313): Status,
+   * Email, Owner, Lead source and Campaign are select columns of the grid.
+   * The clauses keep the shape the old dropdowns stored — see
+   * `leadClausesForGrid` — so no saved view of leads loses its filter.
    */ const views = useCrmSavedView({
         section: 'leads',
         hostId,
         org: props.org,
         basePath: basePath != null ? basePath : ''
     });
-    const filter = useMemo(()=>{
-        var _views_state_filters_find;
-        const value = (_views_state_filters_find = views.state.filters.find((clause)=>clause.field === 'status')) == null ? void 0 : _views_state_filters_find.value;
-        return LEAD_FILTERS.includes(value != null ? value : '') ? value : 'open';
-    }, [
+    const clauses = useMemo(()=>leadClausesForGrid(views.state.filters), [
         views.state.filters
     ]);
-    /*
-   * The `Email` filter (AGL-3245) is the view's too, as an `emailState`
-   * clause beside the status one. Each setter keeps the other's clause:
-   * narrowing to bounced leads does not reopen the unqualified ones.
-   */ const emailFilter = useMemo(()=>{
-        var _views_state_filters_find;
-        const value = (_views_state_filters_find = views.state.filters.find((clause)=>clause.field === 'emailState')) == null ? void 0 : _views_state_filters_find.value;
-        return LEAD_EMAIL_FILTERS.includes(value != null ? value : '') ? value : 'any';
-    }, [
-        views.state.filters
-    ]);
-    const setFilter = useCallback((next)=>views.setFilters([
-            ...views.state.filters.filter((clause)=>clause.field !== 'status'),
-            ...next === 'open' ? [] : [
-                {
-                    field: 'status',
-                    op: 'equals',
-                    value: next
-                }
-            ]
-        ]), [
-        views.setFilters,
-        views.state.filters
-    ]);
-    const setEmailFilter = useCallback((next)=>views.setFilters([
-            ...views.state.filters.filter((clause)=>clause.field !== 'emailState'),
-            ...next === 'any' ? [] : [
-                {
-                    field: 'emailState',
-                    op: 'equals',
-                    value: next
-                }
-            ]
-        ]), [
-        views.setFilters,
-        views.state.filters
-    ]);
-    /*
-   * The `Campaign` filter (AGL-3254) is the view's too, as a `campaignIds`
-   * clause: the id of one of the org's campaign containers, resolved to its
-   * name from the containers themselves — ids only in storage, so a renamed
-   * campaign keeps its leads. Under a site the choice is the campaigns
-   * placed on it; at the organization level, every campaign in the org.
-   */ const campaignFilter = useMemo(()=>{
-        var _ref;
-        var _views_state_filters_find;
-        return (_ref = (_views_state_filters_find = views.state.filters.find((clause)=>clause.field === 'campaignIds')) == null ? void 0 : _views_state_filters_find.value) != null ? _ref : '';
-    }, [
-        views.state.filters
-    ]);
-    const setCampaignFilter = useCallback((next)=>views.setFilters([
-            ...views.state.filters.filter((clause)=>clause.field !== 'campaignIds'),
-            ...next ? [
-                {
-                    field: 'campaignIds',
-                    op: 'contains',
-                    value: next
-                }
-            ] : []
-        ]), [
-        views.setFilters,
-        views.state.filters
-    ]);
-    /*
-   * The `Lead source` filter (AGL-3298) is the view's too: an `equals`
-   * clause naming the label records store, or an `isEmpty` one for the
-   * leads that hold none.
-   */ const leadSourceFilter = useMemo(()=>{
-        var _clause_value;
-        const clause = views.state.filters.find((entry)=>entry.field === 'leadSource');
-        if (!clause) return '';
-        return clause.op === 'isEmpty' ? LEAD_SOURCE_FILTER_NONE : String((_clause_value = clause.value) != null ? _clause_value : '');
-    }, [
-        views.state.filters
-    ]);
-    const setLeadSourceFilter = useCallback((next)=>views.setFilters([
-            ...views.state.filters.filter((clause)=>clause.field !== 'leadSource'),
-            ...next === LEAD_SOURCE_FILTER_NONE ? [
-                {
-                    field: 'leadSource',
-                    op: 'isEmpty',
-                    value: ''
-                }
-            ] : next ? [
-                {
-                    field: 'leadSource',
-                    op: 'equals',
-                    value: next
-                }
-            ] : []
-        ]), [
-        views.setFilters,
-        views.state.filters
+    const setClauses = useCallback((next)=>views.setFilters(leadClausesToStore(next)), [
+        views.setFilters
     ]);
+    const gridFilter = useCrmGridFilter({
+        clauses,
+        onChange: setClauses,
+        selectFields: [
+            'status',
+            'emailState',
+            'ownerUid'
+        ],
+        codecs: LEAD_FILTER_CODECS
+    });
     const campaigns = useCrmCampaigns({
         hostId,
         orgId
@@ -284,28 +203,62 @@ import OrgLeadSurfacesNote from "./org-lead-surfaces-note.js";
     }, [
         campaigns.options
     ]);
-    // The label's id, so the filter's combobox is named "Show" rather than
-    // after the option it shows — see `LeadOwnerSelect`.
-    const filterLabelId = useId();
-    const emailFilterLabelId = useId();
-    const campaignFilterLabelId = useId();
-    const leadSourceFilterLabelId = useId();
     /*
-   * The search box is the SECTION'S, not the grid's (AGL-3246). The grid's
-   * quick filter runs over the rows the grid holds, and the grid holds one
-   * PAGE of the window — so a lead on page three answered "no match" while
-   * the footer below went on counting the unfiltered window. The term
-   * narrows the whole loaded window here, beside the status filter and
-   * before the footer's count and the page slice, over the fields a person
-   * types to find a lead: name, email, company, title and tags.
-   */ const [search, setSearch] = useState('');
-    const rows = useMemo(()=>window.filter((lead)=>leadMatchesFilter(lead, filter) && leadMatchesEmailFilter(lead, emailFilter) && leadMatchesCampaignFilter(lead, campaignFilter) && leadMatchesLeadSourceFilter(lead, leadSourceFilter) && leadMatchesSearch(lead, search)), [
+   * The choices each select column offers. A stored clause naming a value
+   * no longer listed — a retired campaign, a lead source since removed —
+   * stays a choice, so the panel can show it and clear it.
+   */ const filterOptions = useMemo(()=>{
+        const stale = (field, known)=>clauses.filter((clause)=>clause.field === field && clause.op !== 'isEmpty').flatMap((clause)=>clause.value.split(',')).map((value)=>value.trim()).filter((value)=>value && !known.some((option)=>option.value === value)).map((value)=>({
+                    value,
+                    label: value
+                }));
+        const campaignOptions = campaigns.options.map((option)=>({
+                value: option.value,
+                label: option.label
+            }));
+        // Salesforce's Lead Source (AGL-3298): every value the org keeps, inactive ones marked.
+        const sourceOptions = [
+            ...leadSourceList.picklist.values.map((value)=>({
+                    value: value.label,
+                    label: value.active ? value.label : `${value.label} (inactive)`
+                })),
+            {
+                value: LEAD_SOURCE_FILTER_NONE,
+                label: 'No lead source'
+            }
+        ];
+        return {
+            status: LEAD_STATUS_FILTER_OPTIONS,
+            emailState: LEAD_EMAIL_FILTER_OPTIONS,
+            ownerUid: roster.options.map((option)=>({
+                    value: option.uid,
+                    label: Aglyn.crmMemberPickerLabel(option)
+                })),
+            campaignIds: [
+                ...campaignOptions,
+                ...stale('campaignIds', campaignOptions)
+            ],
+            leadSource: [
+                ...sourceOptions,
+                ...stale('leadSource', sourceOptions)
+            ]
+        };
+    }, [
+        clauses,
+        campaigns.options,
+        leadSourceList.picklist,
+        roster.options
+    ]);
+    /*
+   * Every clause and the search narrow the whole loaded WINDOW here, before
+   * the footer's count and the page slice (AGL-3246). The grid holds one
+   * page of it, so a filter or a quick search the grid ran itself would
+   * answer "no match" for a lead on page three.
+   */ const searchKey = gridFilter.searchWords.join(' ');
+    const rows = useMemo(()=>window.filter((lead)=>leadMatchesClauses(lead, clauses) && leadMatchesSearch(lead, searchKey)), [
         window,
-        filter,
-        emailFilter,
-        campaignFilter,
-        leadSourceFilter,
-        search
+        clauses,
+        searchKey
     ]);
     const [page, setPage] = useState(0);
     const [pageSize, setPageSize] = useState(TABLE_PAGE_SIZE_DEFAULT);
@@ -315,11 +268,8 @@ import OrgLeadSurfacesNote from "./org-lead-surfaces-note.js";
     useEffect(()=>{
         setPage(0);
     }, [
-        filter,
-        emailFilter,
-        campaignFilter,
-        leadSourceFilter,
-        search
+        views.state.filters,
+        searchKey
     ]);
     const pageRows = useMemo(()=>rows.slice(page * pageSize, (page + 1) * pageSize), [
         rows,
@@ -333,11 +283,8 @@ import OrgLeadSurfacesNote from "./org-lead-surfaces-note.js";
    * rows no longer listed.
    */ const [selectedIds, setSelectedIds] = useState([]);
     useEffect(()=>setSelectedIds([]), [
-        filter,
-        emailFilter,
-        campaignFilter,
-        leadSourceFilter,
-        search
+        views.state.filters,
+        searchKey
     ]);
     // How the file names the owner and, at the org level, the site.
     const csvOptions = useMemo(()=>_extends({
@@ -719,7 +666,14 @@ import OrgLeadSurfacesNote from "./org-lead-surfaces-note.js";
         leadFields.active,
         leadSourceList.picklist
     ]);
-    /* The column and sort models are the view's (AGL-2617). */ const grid = useCrmViewGrid(views, columns);
+    /*
+   * The column and sort models are the view's (AGL-2617); the filterable
+   * columns are the declared fields, as selects over their choices (AGL-3313).
+   */ const filterColumns = useMemo(()=>crmFilterColumns(columns, LEAD_LIST_FILTER_FIELDS, filterOptions, LEAD_LIST_FILTER_HEADERS), [
+        columns,
+        filterOptions
+    ]);
+    const grid = useCrmViewGrid(views, filterColumns);
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(CardDisplay, {
@@ -765,157 +719,19 @@ import OrgLeadSurfacesNote from "./org-lead-surfaces-note.js";
                                     controller: views,
                                     allLabel: "All leads"
                                 }),
-                                /*#__PURE__*/ _jsxs(FormControl, {
-                                    size: "small",
-                                    sx: {
-                                        minWidth: 160
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ _jsx(InputLabel, {
-                                            id: filterLabelId,
-                                            children: 'Show'
-                                        }),
-                                        /*#__PURE__*/ _jsx(Select, {
-                                            labelId: filterLabelId,
-                                            label: "Show",
-                                            value: filter,
-                                            onChange: (event)=>setFilter(event.target.value),
-                                            children: LEAD_FILTERS.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                                    value: option,
-                                                    children: LEAD_FILTER_LABELS[option]
-                                                }, option))
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsxs(FormControl, {
-                                    size: "small",
-                                    sx: {
-                                        minWidth: 160
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ _jsx(InputLabel, {
-                                            id: emailFilterLabelId,
-                                            children: 'Email'
-                                        }),
-                                        /*#__PURE__*/ _jsx(Select, {
-                                            labelId: emailFilterLabelId,
-                                            label: "Email",
-                                            value: emailFilter,
-                                            onChange: (event)=>setEmailFilter(event.target.value),
-                                            children: LEAD_EMAIL_FILTERS.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                                    value: option,
-                                                    children: LEAD_EMAIL_FILTER_LABELS[option]
-                                                }, option))
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsxs(FormControl, {
-                                    size: "small",
-                                    sx: {
-                                        minWidth: 180
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ _jsx(InputLabel, {
-                                            id: campaignFilterLabelId,
-                                            shrink: true,
-                                            children: 'Campaign'
-                                        }),
-                                        /*#__PURE__*/ _jsxs(Select, {
-                                            labelId: campaignFilterLabelId,
-                                            label: "Campaign",
-                                            notched: true,
-                                            value: campaignFilter,
-                                            onChange: (event)=>setCampaignFilter(String(event.target.value)),
-                                            displayEmpty: true,
-                                            children: [
-                                                /*#__PURE__*/ _jsx(MenuItem, {
-                                                    value: "",
-                                                    children: 'Any campaign'
-                                                }),
-                                                campaigns.options.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                                        value: option.value,
-                                                        children: option.label
-                                                    }, option.value)),
-                                                campaignFilter && !campaigns.options.some((option)=>option.value === campaignFilter) ? /*#__PURE__*/ _jsx(MenuItem, {
-                                                    value: campaignFilter,
-                                                    children: campaignFilter
-                                                }) : null
-                                            ]
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsxs(FormControl, {
-                                    size: "small",
-                                    sx: {
-                                        minWidth: 180
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ _jsx(InputLabel, {
-                                            id: leadSourceFilterLabelId,
-                                            shrink: true,
-                                            children: 'Lead source'
-                                        }),
-                                        /*#__PURE__*/ _jsxs(Select, {
-                                            labelId: leadSourceFilterLabelId,
-                                            label: "Lead source",
-                                            notched: true,
-                                            value: leadSourceFilter,
-                                            onChange: (event)=>setLeadSourceFilter(String(event.target.value)),
-                                            displayEmpty: true,
-                                            children: [
-                                                /*#__PURE__*/ _jsx(MenuItem, {
-                                                    value: "",
-                                                    children: 'Any lead source'
-                                                }),
-                                                leadSourceList.picklist.values.map((value)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                                        value: value.label,
-                                                        children: value.active ? value.label : `${value.label} (inactive)`
-                                                    }, value.id)),
-                                                /*#__PURE__*/ _jsx(MenuItem, {
-                                                    value: LEAD_SOURCE_FILTER_NONE,
-                                                    children: 'No lead source'
-                                                }),
-                                                leadSourceFilter && leadSourceFilter !== LEAD_SOURCE_FILTER_NONE && !Aglyn.crmPicklistValueByLabel(leadSourceList.picklist, leadSourceFilter) ? /*#__PURE__*/ _jsx(MenuItem, {
-                                                    value: leadSourceFilter,
-                                                    children: leadSourceFilter
-                                                }) : null
-                                            ]
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsx(TextField, {
-                                    size: "small",
-                                    value: search,
-                                    onChange: (event)=>setSearch(event.target.value),
-                                    placeholder: "Search leads",
-                                    slotProps: {
-                                        input: {
-                                            startAdornment: /*#__PURE__*/ _jsx(InputAdornment, {
-                                                position: "start",
-                                                children: /*#__PURE__*/ _jsx(MdiIcon, {
-                                                    path: mdiMagnify.path,
-                                                    size: 0.8
-                                                })
-                                            })
-                                        },
-                                        htmlInput: {
-                                            'aria-label': 'Search leads',
-                                            type: 'search'
-                                        }
-                                    },
-                                    sx: {
-                                        minWidth: 200
-                                    }
+                                /*#__PURE__*/ _jsx(CrmFilterBar, {
+                                    fields: LEAD_LIST_FILTER_FIELDS,
+                                    headers: LEAD_LIST_FILTER_HEADERS,
+                                    clauses: clauses,
+                                    onChange: setClauses,
+                                    options: filterOptions,
+                                    marksServed: false
                                 })
                             ]
                         }),
                         status === 'success' && window.length === 0 ? /*#__PURE__*/ _jsx(EmptyStateComponent, {
                             label: 'No leads yet',
                             description: 'Bookings and lead-routed forms on your site become leads on their own — or add one with New lead, or bring a list in with Import CSV.'
-                        }) : status === 'success' && rows.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
-                            variant: "body2",
-                            color: "text.secondary",
-                            children: `No ${LEAD_FILTER_LABELS[filter].toLowerCase()} leads` + (search.trim() ? ` match “${search.trim()}”` : '') + ` among the ${window.length.toLocaleString()} most recently seen.`
                         }) : /*#__PURE__*/ _jsxs(_Fragment, {
                             children: [
                                 /*#__PURE__*/ _jsx(LeadsBulkBar, {
@@ -945,9 +761,13 @@ import OrgLeadSurfacesNote from "./org-lead-surfaces-note.js";
                                         onColumnVisibilityModelChange: grid.onColumnVisibilityModelChange,
                                         sortModel: grid.sortModel,
                                         onSortModelChange: grid.onSortModelChange,
-                                        // The search is the section's, above: the grid's own box
-                                        // would search this page alone.
-                                        quickFilter: false,
+                                        // The panel and the search are the grid's; the section
+                                        // answers both over the whole window (AGL-3313).
+                                        filterMode: "server",
+                                        filterModel: gridFilter.filterModel,
+                                        onFilterModelChange: gridFilter.onFilterModelChange,
+                                        quickFilter: true,
+                                        noRowsLabel: `No leads match among the ${window.length.toLocaleString()} most recently seen`,
                                         // Paged by the footer below, so the grid must not also slice.
                                         hideFooter: true
                                     })
@@ -964,7 +784,7 @@ import OrgLeadSurfacesNote from "./org-lead-surfaces-note.js";
                         }),
                         truncated ? /*#__PURE__*/ _jsx(Alert, {
                             severity: "info",
-                            children: `Showing the ${LEADS_WINDOW.toLocaleString()} most recently seen ` + 'leads. The search box and the status filter narrow these ' + `${LEADS_WINDOW.toLocaleString()} only; older leads are still ` + 'listed in the Inbox and reached by campaign audiences.'
+                            children: `Showing the ${LEADS_WINDOW.toLocaleString()} most recently seen ` + 'leads. The filters and the search narrow these ' + `${LEADS_WINDOW.toLocaleString()} only; older leads are still ` + 'listed in the Inbox and reached by campaign audiences.'
                         }) : null
                     ]
                 })