@aglyn/plugins-crm 1.0.0-beta.200 → 1.0.0-beta.202

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

@@ -35,6 +35,7 @@ import { useCrmRecordsQuota } from "../hooks/use-crm-records-quota.js";
 import { CardDisplay } from "@aglyn/shared-ui-jsx";
 import EmptyStateComponent from "@aglyn/shared-ui-jsx/components/empty-state.component";
 import ContactsBulkBar from "./contacts-bulk-bar.js";
+import { CrmListActions } from "./crm-list-toolbar.js";
 import { ContactImportButton } from "./contact-import-drawer.js";
 import { useSnackbar } from "@aglyn/shared-ui-snackstack";
 import { useFirestore, useFirestoreCollection, useFirestoreDoc, useUser } from "@aglyn/tenant-feature-instance";
@@ -730,144 +731,33 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
     ]);
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
-            /*#__PURE__*/ _jsx(CardDisplay, {
-                header: 'Contacts',
-                help: pluginDocsHelp('contacts', {
-                    anchor: '#the-contacts-page'
-                }),
-                contentGutterX: true,
-                contentGutterY: true,
-                children: /*#__PURE__*/ _jsxs(Stack, {
-                    spacing: 2,
-                    children: [
-                        /*#__PURE__*/ _jsxs(Stack, {
-                            direction: "row",
-                            spacing: 1,
-                            sx: {
-                                alignItems: 'center',
-                                flexWrap: 'wrap',
-                                rowGap: 1
-                            },
-                            children: [
-                                /*#__PURE__*/ _jsx(Typography, {
-                                    variant: "body2",
-                                    color: "text.secondary",
-                                    sx: {
-                                        flex: 1
-                                    },
-                                    children: `${contactCount.toLocaleString()} contacts · ${Number.isFinite(quota.included) ? `${quota.used.toLocaleString()} of ${quota.included.toLocaleString()} CRM records` : `${quota.used.toLocaleString()} CRM records`}`
-                                }),
-                                suiteIncluded ? /*#__PURE__*/ _jsx(ContactImportButton, {
-                                    hostId: hostId,
-                                    org: org
-                                }) : /*#__PURE__*/ _jsx(CrmSuiteLockedButton, {
-                                    children: 'Import CSV'
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    size: "small",
-                                    onClick: handleExport,
-                                    disabled: !contacts.length,
-                                    children: 'Export CSV'
-                                }),
-                                suiteIncluded ? /*#__PURE__*/ _jsx(Button, {
-                                    size: "small",
-                                    variant: "contained",
-                                    color: "primary",
-                                    disabled: !dataScope,
-                                    onClick: ()=>{
-                                        setCreateError(null);
-                                        setCreateOpen(true);
-                                    },
-                                    children: 'New contact'
-                                }) : /*#__PURE__*/ _jsx(CrmSuiteLockedButton, {
-                                    variant: "contained",
-                                    color: "primary",
-                                    children: 'New contact'
-                                })
-                            ]
-                        }),
-                        suiteIncluded ? null : /*#__PURE__*/ _jsx(CrmSuiteNotice, {
-                            children: 'Contacts arrive here on their own from your forms, sign-ups, ' + 'orders and bookings. Adding one by hand, importing a CSV, ' + "saved views, and a contact's owner, stage and company are " + 'part of the CRM.'
-                        }),
-                        /*#__PURE__*/ _jsxs(Stack, {
-                            spacing: 1,
-                            children: [
-                                /*#__PURE__*/ _jsx(CrmViewsControl, {
-                                    controller: views,
-                                    allLabel: "All contacts",
-                                    suiteLocked: !suiteIncluded,
-                                    presets: segmentPresets,
-                                    onSaveAsSegment: segmentFilters && dataScope ? ()=>setSegmentName('') : null
-                                }),
-                                /*#__PURE__*/ _jsx(ListFilterChips, {
-                                    fields: filterFields,
-                                    headers: filterHeaders,
-                                    clauses: views.state.filters,
-                                    onChange: views.setFilters,
-                                    options: filterOptions,
-                                    marksServed: false
-                                })
-                            ]
-                        }),
-                        !quota.allowed ? /*#__PURE__*/ _jsx(Alert, {
-                            severity: "warning",
-                            children: 'CRM records limit reached — new visitors are no longer ' + 'captured' + (droppedTotal > 0 ? ` (${droppedTotal.toLocaleString()} missed so far)` : '') + '. Upgrade in Billing to keep collecting.'
-                        }) : quota.overageRecords > 0 && quota.overageRateUsd != null && // No claim about money until the verdict that decides it has
-                        // settled (AGL-1662). Before Remote Config activation the flag
-                        // reads its registry default, which is no org's verdict, so an
-                        // ungated alert could assert the wrong wording for one paint.
-                        releaseFlagsReady ? /*#__PURE__*/ _jsx(Alert, {
-                            severity: "info",
-                            children: contactsBilled ? // basis (AGL-2399): the count here is LIVE, the invoice
-                            // charges the last reading before the month closes, so the
-                            // dollar figure is a projection until the month ends. Staff
-                            // and customer must not read different sentences about the
-                            // same org's money — that applies to WHEN it is measured as
-                            // much as to how much.
-                            `${quota.overageRecords.toLocaleString()} CRM records over ` + `your plan's included ${quota.included.toLocaleString()} — ` + `metered at $${quota.overageRateUsd}/1,000 per month ` + `(≈$${quota.overageMonthlyUsd.toFixed(2)} if your list ends ` + 'the month at this size). ' + 'Upgrade in Billing for a larger included audience.' : // itself the wording `1a2aed5cb` published to
-                            // `billing-and-plans/overview.md` (AGL-1601/1603). Staff and
-                            // customer must not read different sentences about the same
-                            // org's money.
-                            //
-                            // THE COUNT STAYS, THE TOTAL GOES: the head-count is real —
-                            // ingestion captured those records — and is not a claim
-                            // about money. The upgrade nudge goes with the total, since
-                            // it prompts a purchase premised on a charge that is not
-                            // happening.
-                            `${quota.overageRecords.toLocaleString()} CRM records over ` + `your plan's included ${quota.included.toLocaleString()} — ` + 'not billed while the CRM is unavailable. ' + `The $${quota.overageRateUsd}/1,000 rate applies once ` + 'Contacts opens.'
-                        }) : droppedTotal > 0 ? /*#__PURE__*/ _jsx(Alert, {
-                            severity: "info",
-                            children: `${droppedTotal.toLocaleString()} earlier visitor${droppedTotal === 1 ? ' was' : 's were'} not captured while your CRM records band was full.`
-                        }) : null,
-                        unmatchedRefundTotal > 0 ? /*#__PURE__*/ _jsx(Alert, {
-                            severity: "warning",
-                            children: `${unmatchedRefundTotal.toLocaleString()} refund${unmatchedRefundTotal === 1 ? '' : 's'} could not be recorded against a contact${UNMATCHED_REFUND_REASON[unmatchedRefundReason] ? ` — most recently because ${UNMATCHED_REFUND_REASON[unmatchedRefundReason]}` : ''}. The money moved; the customer's timeline does not show it.`
-                        }) : null,
-                        /*#__PURE__*/ _jsx(ListQueryNotices, {
-                            refused: refused,
-                            notices: paged.plan.notices
+            /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 3,
+                children: [
+                    /*#__PURE__*/ _jsx(CardDisplay, {
+                        header: 'Contacts',
+                        help: pluginDocsHelp('contacts', {
+                            anchor: '#the-contacts-page'
                         }),
-                        contacts.length === 0 && !views.state.filters.length && !searchWords.some((word)=>word.trim()) ? /*#__PURE__*/ _jsx(EmptyStateComponent, {
-                            label: contactsStatus === 'loading' ? 'Loading contacts…' : 'No contacts yet',
-                            description: contactsStatus === 'loading' ? undefined : suiteIncluded ? 'Form submissions, member sign-ups, orders and bookings become contacts on their own; add one by hand or bring a list in from a CSV.' : 'Form submissions, member sign-ups, orders and bookings become contacts on their own.',
-                            action: contactsStatus === 'loading' ? undefined : !suiteIncluded ? /*#__PURE__*/ _jsxs(Stack, {
-                                direction: "row",
-                                spacing: 1,
+                        contentGutterX: true,
+                        contentGutterY: true,
+                        HeaderProps: {
+                            // The record actions, top right and never clipped (AGL-3311).
+                            action: /*#__PURE__*/ _jsxs(CrmListActions, {
                                 children: [
-                                    /*#__PURE__*/ _jsx(CrmSuiteLockedButton, {
-                                        variant: "contained",
-                                        color: "primary",
-                                        children: 'New contact'
-                                    }),
-                                    /*#__PURE__*/ _jsx(CrmSuiteLockedButton, {
+                                    suiteIncluded ? /*#__PURE__*/ _jsx(ContactImportButton, {
+                                        hostId: hostId,
+                                        org: org
+                                    }) : /*#__PURE__*/ _jsx(CrmSuiteLockedButton, {
                                         children: 'Import CSV'
-                                    })
-                                ]
-                            }) : /*#__PURE__*/ _jsxs(Stack, {
-                                direction: "row",
-                                spacing: 1,
-                                children: [
+                                    }),
                                     /*#__PURE__*/ _jsx(Button, {
+                                        size: "small",
+                                        onClick: handleExport,
+                                        disabled: !contacts.length,
+                                        children: 'Export CSV'
+                                    }),
+                                    suiteIncluded ? /*#__PURE__*/ _jsx(Button, {
                                         size: "small",
                                         variant: "contained",
                                         color: "primary",
@@ -877,79 +767,188 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
                                             setCreateOpen(true);
                                         },
                                         children: 'New contact'
-                                    }),
-                                    /*#__PURE__*/ _jsx(ContactImportButton, {
-                                        hostId: hostId,
-                                        org: org
+                                    }) : /*#__PURE__*/ _jsx(CrmSuiteLockedButton, {
+                                        variant: "contained",
+                                        color: "primary",
+                                        children: 'New contact'
                                     })
                                 ]
                             })
-                        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                        },
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 2,
                             children: [
-                                /*#__PURE__*/ _jsx(ContactsBulkBar, {
-                                    hostId: hostId,
-                                    org: org,
-                                    scope: dataScope,
-                                    consentGroup: consentGroup,
-                                    rows: contacts,
-                                    selected: selectedIds,
-                                    onSelectedChange: setSelectedIds,
-                                    csv: csvOptions,
-                                    suiteLocked: !suiteIncluded
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    color: "text.secondary",
+                                    children: `${contactCount.toLocaleString()} contacts · ${Number.isFinite(quota.included) ? `${quota.used.toLocaleString()} of ${quota.included.toLocaleString()} CRM records` : `${quota.used.toLocaleString()} CRM records`}`
                                 }),
-                                /*#__PURE__*/ _jsx(CrmColumnOrderProvider, {
-                                    value: grid.columnOrder,
-                                    children: /*#__PURE__*/ _jsx(ListTable, {
-                                        rows: contacts,
-                                        columns: grid.columns,
-                                        slots: CRM_LIST_SLOTS,
-                                        selectable: {
-                                            selected: selectedIds,
-                                            onChange: setSelectedIds
-                                        },
-                                        onOpen: (id)=>router.push(routes.contact(id)),
-                                        /*
-                   * The grid's Filters panel and quick search edit the view's
-                   * clauses; the list's query answers them (AGL-3321), so the
-                   * grid must not filter again itself. Opening the panel is
-                   * what reads the roster and the companies its pickers name.
-                   * Columns are the view's, controlled so a saved arrangement
-                   * is what the grid shows; the query orders the rows —
-                   * newest change first — so the grid sorts nothing itself.
-                   */ filterMode: "server",
-                                        filterModel: gridFilter.filterModel,
-                                        onFilterModelChange: gridFilter.onFilterModelChange,
-                                        quickFilter: true,
-                                        onPreferencePanelOpen: ()=>setFilterOpened(true),
-                                        // A filter that matched nothing is said inside the grid,
-                                        // so the toolbar that set it stays to change it.
-                                        noRowsLabel: contactsStatus === 'loading' ? 'Loading…' : 'No contacts match these filters',
-                                        columnVisibilityModel: grid.columnVisibilityModel,
-                                        onColumnVisibilityModelChange: grid.onColumnVisibilityModelChange,
-                                        sortingMode: "server",
-                                        disableColumnSorting: true,
-                                        loading: contactsStatus === 'loading',
-                                        // Paged by the footer below, so the grid must not also slice.
-                                        hideFooter: true
-                                    })
+                                suiteIncluded ? null : /*#__PURE__*/ _jsx(CrmSuiteNotice, {
+                                    children: 'Contacts arrive here on their own from your forms, sign-ups, ' + 'orders and bookings. Adding one by hand, importing a CSV, ' + "saved views, and a contact's owner, stage and company are " + 'part of the CRM.'
+                                }),
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    spacing: 1,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(CrmViewsControl, {
+                                            controller: views,
+                                            allLabel: "All contacts",
+                                            suiteLocked: !suiteIncluded,
+                                            presets: segmentPresets,
+                                            onSaveAsSegment: segmentFilters && dataScope ? ()=>setSegmentName('') : null
+                                        }),
+                                        /*#__PURE__*/ _jsx(ListFilterChips, {
+                                            fields: filterFields,
+                                            headers: filterHeaders,
+                                            clauses: views.state.filters,
+                                            onChange: views.setFilters,
+                                            options: filterOptions,
+                                            marksServed: false
+                                        })
+                                    ]
                                 }),
-                                /*#__PURE__*/ _jsx(ListPagination, {
-                                    page: paged.page,
-                                    pageSize: paged.pageSize,
-                                    rowCount: contacts.length,
-                                    hasMore: paged.hasMore,
-                                    onPageChange: paged.setPage,
-                                    onPageSizeChange: paged.setPageSize
+                                !quota.allowed ? /*#__PURE__*/ _jsx(Alert, {
+                                    severity: "warning",
+                                    children: 'CRM records limit reached — new visitors are no longer ' + 'captured' + (droppedTotal > 0 ? ` (${droppedTotal.toLocaleString()} missed so far)` : '') + '. Upgrade in Billing to keep collecting.'
+                                }) : quota.overageRecords > 0 && quota.overageRateUsd != null && // No claim about money until the verdict that decides it has
+                                // settled (AGL-1662). Before Remote Config activation the flag
+                                // reads its registry default, which is no org's verdict, so an
+                                // ungated alert could assert the wrong wording for one paint.
+                                releaseFlagsReady ? /*#__PURE__*/ _jsx(Alert, {
+                                    severity: "info",
+                                    children: contactsBilled ? // basis (AGL-2399): the count here is LIVE, the invoice
+                                    // charges the last reading before the month closes, so the
+                                    // dollar figure is a projection until the month ends. Staff
+                                    // and customer must not read different sentences about the
+                                    // same org's money — that applies to WHEN it is measured as
+                                    // much as to how much.
+                                    `${quota.overageRecords.toLocaleString()} CRM records over ` + `your plan's included ${quota.included.toLocaleString()} — ` + `metered at $${quota.overageRateUsd}/1,000 per month ` + `(≈$${quota.overageMonthlyUsd.toFixed(2)} if your list ends ` + 'the month at this size). ' + 'Upgrade in Billing for a larger included audience.' : // itself the wording `1a2aed5cb` published to
+                                    // `billing-and-plans/overview.md` (AGL-1601/1603). Staff and
+                                    // customer must not read different sentences about the same
+                                    // org's money.
+                                    //
+                                    // THE COUNT STAYS, THE TOTAL GOES: the head-count is real —
+                                    // ingestion captured those records — and is not a claim
+                                    // about money. The upgrade nudge goes with the total, since
+                                    // it prompts a purchase premised on a charge that is not
+                                    // happening.
+                                    `${quota.overageRecords.toLocaleString()} CRM records over ` + `your plan's included ${quota.included.toLocaleString()} — ` + 'not billed while the CRM is unavailable. ' + `The $${quota.overageRateUsd}/1,000 rate applies once ` + 'Contacts opens.'
+                                }) : droppedTotal > 0 ? /*#__PURE__*/ _jsx(Alert, {
+                                    severity: "info",
+                                    children: `${droppedTotal.toLocaleString()} earlier visitor${droppedTotal === 1 ? ' was' : 's were'} not captured while your CRM records band was full.`
+                                }) : null,
+                                unmatchedRefundTotal > 0 ? /*#__PURE__*/ _jsx(Alert, {
+                                    severity: "warning",
+                                    children: `${unmatchedRefundTotal.toLocaleString()} refund${unmatchedRefundTotal === 1 ? '' : 's'} could not be recorded against a contact${UNMATCHED_REFUND_REASON[unmatchedRefundReason] ? ` — most recently because ${UNMATCHED_REFUND_REASON[unmatchedRefundReason]}` : ''}. The money moved; the customer's timeline does not show it.`
+                                }) : null,
+                                /*#__PURE__*/ _jsx(ListQueryNotices, {
+                                    refused: refused,
+                                    notices: paged.plan.notices
+                                }),
+                                contacts.length === 0 && !views.state.filters.length && !searchWords.some((word)=>word.trim()) ? /*#__PURE__*/ _jsx(EmptyStateComponent, {
+                                    label: contactsStatus === 'loading' ? 'Loading contacts…' : 'No contacts yet',
+                                    description: contactsStatus === 'loading' ? undefined : suiteIncluded ? 'Form submissions, member sign-ups, orders and bookings become contacts on their own; add one by hand or bring a list in from a CSV.' : 'Form submissions, member sign-ups, orders and bookings become contacts on their own.',
+                                    action: contactsStatus === 'loading' ? undefined : !suiteIncluded ? /*#__PURE__*/ _jsxs(Stack, {
+                                        direction: "row",
+                                        spacing: 1,
+                                        children: [
+                                            /*#__PURE__*/ _jsx(CrmSuiteLockedButton, {
+                                                variant: "contained",
+                                                color: "primary",
+                                                children: 'New contact'
+                                            }),
+                                            /*#__PURE__*/ _jsx(CrmSuiteLockedButton, {
+                                                children: 'Import CSV'
+                                            })
+                                        ]
+                                    }) : /*#__PURE__*/ _jsxs(Stack, {
+                                        direction: "row",
+                                        spacing: 1,
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                size: "small",
+                                                variant: "contained",
+                                                color: "primary",
+                                                disabled: !dataScope,
+                                                onClick: ()=>{
+                                                    setCreateError(null);
+                                                    setCreateOpen(true);
+                                                },
+                                                children: 'New contact'
+                                            }),
+                                            /*#__PURE__*/ _jsx(ContactImportButton, {
+                                                hostId: hostId,
+                                                org: org
+                                            })
+                                        ]
+                                    })
+                                }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(ContactsBulkBar, {
+                                            hostId: hostId,
+                                            org: org,
+                                            scope: dataScope,
+                                            consentGroup: consentGroup,
+                                            rows: contacts,
+                                            selected: selectedIds,
+                                            onSelectedChange: setSelectedIds,
+                                            csv: csvOptions,
+                                            suiteLocked: !suiteIncluded
+                                        }),
+                                        /*#__PURE__*/ _jsx(CrmColumnOrderProvider, {
+                                            value: grid.columnOrder,
+                                            children: /*#__PURE__*/ _jsx(ListTable, {
+                                                rows: contacts,
+                                                columns: grid.columns,
+                                                slots: CRM_LIST_SLOTS,
+                                                selectable: {
+                                                    selected: selectedIds,
+                                                    onChange: setSelectedIds
+                                                },
+                                                onOpen: (id)=>router.push(routes.contact(id)),
+                                                /*
+                     * The grid's Filters panel and quick search edit the view's
+                     * clauses; the list's query answers them (AGL-3321), so the
+                     * grid must not filter again itself. Opening the panel is
+                     * what reads the roster and the companies its pickers name.
+                     * Columns are the view's, controlled so a saved arrangement
+                     * is what the grid shows; the query orders the rows —
+                     * newest change first — so the grid sorts nothing itself.
+                     */ filterMode: "server",
+                                                filterModel: gridFilter.filterModel,
+                                                onFilterModelChange: gridFilter.onFilterModelChange,
+                                                quickFilter: true,
+                                                onPreferencePanelOpen: ()=>setFilterOpened(true),
+                                                // A filter that matched nothing is said inside the grid,
+                                                // so the toolbar that set it stays to change it.
+                                                noRowsLabel: contactsStatus === 'loading' ? 'Loading…' : 'No contacts match these filters',
+                                                columnVisibilityModel: grid.columnVisibilityModel,
+                                                onColumnVisibilityModelChange: grid.onColumnVisibilityModelChange,
+                                                sortingMode: "server",
+                                                disableColumnSorting: true,
+                                                loading: contactsStatus === 'loading',
+                                                // Paged by the footer below, so the grid must not also slice.
+                                                hideFooter: true
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(ListPagination, {
+                                            page: paged.page,
+                                            pageSize: paged.pageSize,
+                                            rowCount: contacts.length,
+                                            hasMore: paged.hasMore,
+                                            onPageChange: paged.setPage,
+                                            onPageSizeChange: paged.setPageSize
+                                        })
+                                    ]
                                 })
                             ]
-                        }),
-                        /*#__PURE__*/ _jsx(RecentActivityFeed, {
-                            hostId: hostId,
-                            org: org,
-                            basePath: props.basePath
                         })
-                    ]
-                })
+                    }),
+                    /*#__PURE__*/ _jsx(RecentActivityFeed, {
+                        hostId: hostId,
+                        org: org,
+                        basePath: props.basePath
+                    })
+                ]
             }),
             /*#__PURE__*/ _jsxs(Dialog, {
                 open: segmentName !== null,