@aglyn/plugins-email 1.0.0-beta.143

package/src/lib/components/list-members-panel.js

@@ -0,0 +1,686 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Who is on one list, and the three things you can do about it.
+ *
+ * The audience card could create a list and delete a list. It could not show
+ * you a single name on one. This panel is the rest of it: read the membership,
+ * add somebody, take somebody off. The list's own settings — its name, and the
+ * rule behind a dynamic one — belong to the edit route, because they are
+ * facts about the LIST rather than about who is on it.
+ *
+ * ## It mounts only on a list's own page
+ *
+ * The audience detail route renders this for the ONE list being read. A
+ * membership listener per row would open one per list on the audiences table,
+ * on a surface where most visits are to read the list of lists — the
+ * read-on-mount shape `emails-console-read-cost.spec.tsx` meters. Nothing here
+ * reads anything until a list is opened, and the add form reads nothing until
+ * an address is typed.
+ *
+ * ## Whether somebody may be ADDED is the server's answer, always
+ *
+ * Every sentence about an address being typed in is `email/list-members-preview`
+ * answering from that person's actual record and both suppression lists. This
+ * component decides none of it. A screen that decided for itself would be a
+ * second copy of the rule on the one surface whose job is to tell the operator
+ * the truth about what is about to happen — including, and especially, that
+ * the product knows nothing about this person's permission.
+ *
+ * ## The membership table reads consent through the SEND-TIME reader
+ *
+ * The `Consent` column answers the same question `performCampaignSend` asks of
+ * the same document, so it asks it with the same function —
+ * {@link readMarketingBasis}, against the consent group this console is being
+ * viewed as. A column that picked the fields out of the row itself is a second
+ * reader of a stored shape, and the two only agree until the shape moves.
+ *
+ * ## Removing is not suppressing, and the screen says so
+ *
+ * Taking somebody off a list is the operator changing their mind about an
+ * audience. It is not the person asking to stop being mailed, it does not stop
+ * another list reaching them, and it writes nothing to the suppression list.
+ * Those are different acts with different records, and a console that let them
+ * blur is a console where "remove" is quietly relied on as an unsubscribe.
+ */ import { readMarketingBasis } from "@aglyn/aglyn";
+import { mdiAccountRemoveOutline } from "@aglyn/shared-data-mdi";
+import { MdiIcon, useConfirmationContext } from "@aglyn/shared-ui-jsx";
+import { ListPagination } from "@aglyn/shared-ui-jsx/components/list-pagination.component";
+import { ListRowActions, ListTable, listActionsColumn } from "@aglyn/shared-ui-jsx/components/list-table.component";
+import { TABLE_ROW_HEIGHT } from "@aglyn/shared-ui-jsx/const/table-pagination";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { Alert, Box, Button, Checkbox, Chip, FormControlLabel, Stack, TextField, Typography } from "@mui/material";
+import { collection, deleteDoc, doc, documentId, limit, orderBy, query } from "firebase/firestore";
+import { useCallback, useEffect, useState } from "react";
+import { useFirestore, usePagedCollection, useUser } from "@aglyn/tenant-feature-instance";
+import { authorizedFetch } from "@aglyn/shared-util-http/authorized-token";
+/**
+ * How the basis reads on screen, for the group this console is viewed as.
+ *
+ * ## Read through `readMarketingBasis`, never off the row
+ *
+ * This picked `marketingConsent`, `marketingConsentBasis` and
+ * `marketingConsentAtMs` off the top of the membership document, which is
+ * where `enrollListMember` used to put them. They now live in an entry per
+ * site under `marketingConsentByHost`, because a basis runs to the brand it
+ * was given to rather than to the account that holds the row. Nothing here
+ * moved with them, so every top-level read answered `undefined` and every
+ * member of every list — including people carrying a perfectly good attested
+ * basis — was reported as having no basis on record, on the one screen an
+ * operator consults before mailing them. `performCampaignSend` reads the same
+ * documents through the function below and mailed them, correctly, at the same
+ * time.
+ *
+ * The fix is not a second field name. It is that the send path's reader is the
+ * only reader: a surface that parses the stored shape itself agrees with the
+ * sender only until the shape moves, and it moves without anybody thinking to
+ * look here.
+ *
+ * ## Five states, because the model carries five
+ *
+ * An attestation and an opt-in are not the same fact — one is a person's own
+ * decision, the other a claim an account made on their behalf — and a table
+ * rendering both as a tick is the conflation `list-members.ts` stores the
+ * basis to prevent. The three that are not a grant are not one state either.
+ * Absence is not refusal, and neither of them is "opted in, to somebody else
+ * in this account": that third one is a person the sender deliberately leaves
+ * alone, and an operator who cannot see why reads it as the product having
+ * lost their subscriber.
+ */ function consentLabel(member, group) {
+    const record = readMarketingBasis(member, group);
+    const when = record.basisAtMs ? ` · ${new Date(record.basisAtMs).toLocaleDateString()}` : '';
+    if (record.basis === 'declined') {
+        return {
+            label: `Opted out${when}`,
+            color: 'error'
+        };
+    }
+    if (record.basis === 'granted') {
+        /*
+     * `assertedBy` rather than the stored basis field, because there are two
+     * ways a record says an operator asserted it — a membership's
+     * `marketingConsentBasis`, and the provenance object a backfill writes —
+     * and the reader has already resolved both into this one answer.
+     */ return record.assertedBy === 'operator' ? {
+            label: `Attested by your team${when}`,
+            color: 'warning'
+        } : {
+            label: `Opted in${when}`,
+            color: 'default'
+        };
+    }
+    /*
+   * A grant this site may not use. Reported rather than folded into "no
+   * basis" because the two are different situations with different answers:
+   * nobody has ever asked this person, versus somebody asked them on behalf
+   * of another brand in this account and this brand may not borrow it.
+   */ if (record.otherGrant === 'other-host') {
+        return {
+            label: 'Opted in to another site',
+            color: 'warning'
+        };
+    }
+    if (record.otherGrant === 'unscoped') {
+        return {
+            label: 'Opted in — no site recorded',
+            color: 'warning'
+        };
+    }
+    return {
+        label: 'No basis on record',
+        color: 'default'
+    };
+}
+/** Free text — a paste, a typed address, commas or newlines — to addresses. */ export function splitAddresses(value) {
+    return value.split(/[\s,;]+/).map((entry)=>entry.trim())// A pasted mail-client line is `Name <a@b.co>`; keep the address part.
+    .map((entry)=>entry.replace(/^.*<|>.*$/g, '')).filter(Boolean);
+}
+export function ListMembersPanel(props) {
+    const { hostId, consentGroup, scope, listId, listName, onMembershipChanged, findRule, ruleSummary } = props;
+    const firestore = useFirestore();
+    const { data: user } = useUser();
+    const { enqueueSnackbar } = useSnackbar();
+    const { confirm } = useConfirmationContext();
+    /*
+   * Ordered by DOCUMENT ID and paged, not capped and re-sorted here.
+   *
+   * `__name__` rather than `addedAt`, which is the column a reader would
+   * assume: `orderBy` FILTERS as well as sorts, so a document missing the
+   * field is not in the result at all — and `addedAt` is stamped only when a
+   * membership is CREATED, so every row written under the two legacy ids
+   * `list-members.ts` still adopts predates it. Ordering on it would drop the
+   * oldest members from their own list, silently, which is the failure that
+   * turned an audience into a random sample (AGL-2501). The id is the one key
+   * every row has.
+   */ const { rows: members, hasMore, page, setPage, pageSize, setPageSize } = usePagedCollection((pageLimit)=>query(collection(firestore, scope[0], scope[1], 'lists', listId, 'members'), orderBy(documentId()), limit(pageLimit)), [
+        firestore,
+        scope[0],
+        scope[1],
+        listId
+    ], {
+        idField: '$id'
+    });
+    const [addInput, setAddInput] = useState('');
+    const [addName, setAddName] = useState('');
+    const [preview, setPreview] = useState(null);
+    const [attested, setAttested] = useState(false);
+    const [results, setResults] = useState(null);
+    const [busy, setBusy] = useState(false);
+    /*
+   * The addresses a SEARCH found, when the operator ran one.
+   *
+   * A second way to fill the same candidate set, not a second way to add. Once
+   * this holds addresses, everything below it — the consent readout, the
+   * attestation, the Add button — is the code the typed path already used, so
+   * there is exactly one place in this component where somebody is put on a
+   * list and exactly one gate in front of it.
+   */ const [found, setFound] = useState(null);
+    const addresses = found ? found.emails : splitAddresses(addInput);
+    /*
+   * Any edit to the box invalidates the answer.
+   *
+   * A preview belongs to the exact addresses it was run for. Leaving a stale
+   * one on screen would show a count, and an attestation checkbox, for a set
+   * the operator has since changed — so the number they stand behind would
+   * not be the number that acts. Typing also abandons a search: the two are
+   * alternative ways of naming a candidate set, and holding both at once
+   * would leave the Add button acting on whichever the code happened to
+   * prefer.
+   */ useEffect(()=>{
+        setPreview(null);
+        setAttested(false);
+        setResults(null);
+        setFound(null);
+    }, [
+        addInput
+    ]);
+    const post = useCallback(async (route, body)=>{
+        const response = await authorizedFetch(user, `/api/email/${route}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(_extends({
+                hostId,
+                listId
+            }, body))
+        });
+        const payload = await response.json().catch(()=>({}));
+        return {
+            ok: response.ok,
+            payload
+        };
+    }, [
+        user,
+        hostId,
+        listId
+    ]);
+    const handlePreview = useCallback(async ()=>{
+        if (busy || !addresses.length) return;
+        setBusy(true);
+        try {
+            const { ok, payload } = await post('list-members-preview', {
+                emails: addresses
+            });
+            if (!ok) {
+                var _ref;
+                return void enqueueSnackbar((_ref = payload == null ? void 0 : payload.error) != null ? _ref : 'The addresses could not be checked.', {
+                    variant: 'warning',
+                    allowDuplicate: true
+                });
+            }
+            setPreview(payload);
+        } catch (unused) {
+            enqueueSnackbar('The addresses could not be checked.', {
+                variant: 'warning',
+                allowDuplicate: true
+            });
+        } finally{
+            setBusy(false);
+        }
+    }, [
+        busy,
+        addresses,
+        post,
+        enqueueSnackbar
+    ]);
+    const handleFind = useCallback(async ()=>{
+        if (busy || !findRule) return;
+        setBusy(true);
+        try {
+            var _ref;
+            const { ok, payload } = await post('list-rule-preview', {
+                rule: findRule
+            });
+            if (!ok) {
+                var _ref1;
+                return void enqueueSnackbar((_ref1 = payload == null ? void 0 : payload.error) != null ? _ref1 : 'The audience could not be worked out.', {
+                    variant: 'warning',
+                    allowDuplicate: true
+                });
+            }
+            /*
+       * The verdicts come back from the SAME resolution the typed path runs,
+       * so what lands in `preview` here is the same object the consent
+       * readout below already knows how to draw. A search that returned its
+       * own shaped summary would be a second consent readout, and the second
+       * one is the one nobody reviews.
+       */ setFound(payload);
+            setPreview(payload);
+            setAttested(false);
+            setResults(null);
+            if (!Number((_ref = payload == null ? void 0 : payload.matched) != null ? _ref : 0)) {
+                enqueueSnackbar('These filters match nobody', {
+                    variant: 'info',
+                    persist: false
+                });
+            }
+        } catch (unused) {
+            enqueueSnackbar('The audience could not be worked out.', {
+                variant: 'warning',
+                allowDuplicate: true
+            });
+        } finally{
+            setBusy(false);
+        }
+    }, [
+        busy,
+        findRule,
+        post,
+        enqueueSnackbar
+    ]);
+    const handleAdd = useCallback(async ()=>{
+        if (busy || !preview) return;
+        setBusy(true);
+        try {
+            var _ref, _ref1;
+            const { ok, payload } = await post('list-members-add', _extends({
+                emails: addresses
+            }, addresses.length === 1 && addName.trim() ? {
+                name: addName.trim()
+            } : {}, {
+                // The operator's assertion, not a basis they named: the server
+                // derives a pass-through from each person's own record, and this flag
+                // can only ever add the attributable kind.
+                attestConsent: attested
+            }));
+            if (!ok) {
+                var _ref2;
+                return void enqueueSnackbar((_ref2 = payload == null ? void 0 : payload.error) != null ? _ref2 : 'Nobody was added to the list', {
+                    variant: 'warning',
+                    allowDuplicate: true
+                });
+            }
+            const added = Number((_ref = payload == null ? void 0 : payload.added) != null ? _ref : 0);
+            setResults((_ref1 = payload == null ? void 0 : payload.results) != null ? _ref1 : []);
+            setPreview(null);
+            if (added) {
+                setAddInput('');
+                setAddName('');
+                setFound(null);
+                onMembershipChanged == null ? void 0 : onMembershipChanged();
+            }
+            enqueueSnackbar(added === 1 ? 'One person added' : `${added} people added`, {
+                variant: added ? 'success' : 'warning',
+                persist: false
+            });
+        } catch (unused) {
+            enqueueSnackbar('Nobody was added to the list', {
+                variant: 'warning',
+                allowDuplicate: true
+            });
+        } finally{
+            setBusy(false);
+        }
+    }, [
+        busy,
+        preview,
+        addresses,
+        addName,
+        attested,
+        post,
+        enqueueSnackbar,
+        onMembershipChanged
+    ]);
+    const handleRemove = useCallback(async (member)=>{
+        var _member_email;
+        const accepted = await confirm({
+            title: 'Remove from this list?',
+            description: `${(_member_email = member.email) != null ? _member_email : 'This person'} stops being part of "${listName}" ` + 'and campaigns to this list stop reaching them. This is NOT an ' + 'unsubscribe: it does not add them to your suppression list, and ' + 'any other list they are on still reaches them. If they asked to ' + 'stop hearing from you, suppress the address instead.',
+            confirmationText: 'Remove',
+            confirmationButtonProps: {
+                color: 'error'
+            }
+        })// `confirm` resolves with no value and REJECTS on cancel, so gating on
+        // the resolved value alone would make this always proceed (AGL-950).
+        .then(()=>true).catch(()=>false);
+        if (!accepted) return;
+        try {
+            await deleteDoc(doc(firestore, scope[0], scope[1], 'lists', listId, 'members', member.$id));
+            onMembershipChanged == null ? void 0 : onMembershipChanged();
+            enqueueSnackbar('Removed from the list', {
+                variant: 'success',
+                persist: false
+            });
+        } catch (error) {
+            console.error(error);
+            enqueueSnackbar('They were not removed', {
+                variant: 'error'
+            });
+        }
+    }, [
+        confirm,
+        listName,
+        firestore,
+        scope,
+        listId,
+        enqueueSnackbar,
+        onMembershipChanged
+    ]);
+    const enrollable = preview ? preview.optedIn + preview.needAttestation : 0;
+    const columns = [
+        {
+            field: 'email',
+            headerName: 'Address',
+            flex: 1,
+            minWidth: 220,
+            valueGetter: (_value, row)=>{
+                var _row_email;
+                return (_row_email = row.email) != null ? _row_email : '—';
+            }
+        },
+        {
+            field: 'name',
+            headerName: 'Name',
+            flex: 1,
+            minWidth: 160,
+            valueGetter: (_value, row)=>{
+                var _row_name;
+                return (_row_name = row.name) != null ? _row_name : '—';
+            }
+        },
+        {
+            field: 'addedAt',
+            headerName: 'Joined',
+            width: 120,
+            // Sorted on the instant, drawn as a local date.
+            valueGetter: (_value, row)=>{
+                var _ref;
+                var _row_addedAt_toDate_getTime, _row_addedAt_toDate, _row_addedAt_toDate1, _row_addedAt;
+                return (_ref = (_row_addedAt = row.addedAt) == null ? void 0 : (_row_addedAt_toDate1 = _row_addedAt.toDate) == null ? void 0 : (_row_addedAt_toDate = _row_addedAt_toDate1.call(_row_addedAt)) == null ? void 0 : (_row_addedAt_toDate_getTime = _row_addedAt_toDate.getTime) == null ? void 0 : _row_addedAt_toDate_getTime.call(_row_addedAt_toDate)) != null ? _ref : 0;
+            },
+            renderCell: ({ row })=>{
+                var _row_addedAt;
+                return ((_row_addedAt = row.addedAt) == null ? void 0 : _row_addedAt.toDate) ? row.addedAt.toDate().toLocaleDateString() : '—';
+            }
+        },
+        {
+            field: 'via',
+            headerName: 'How',
+            width: 200,
+            valueGetter: (_value, row)=>row.via === 'rule' ? 'Rule' : 'Added',
+            /*
+        `via` says whether a rule put them here or a person did, which is what
+        decides whether they LEAVE on their own: the materializer reconciles its
+        own rows away and never touches a manual one. `source` is the finer
+        provenance underneath it.
+       */ renderCell: ({ row, value })=>/*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 1,
+                    sx: {
+                        alignItems: 'center',
+                        minWidth: 0
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Chip, {
+                            size: "small",
+                            variant: "outlined",
+                            label: value
+                        }),
+                        row.source ? /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "text.secondary",
+                            noWrap: true,
+                            children: row.source
+                        }) : null
+                    ]
+                })
+        },
+        {
+            field: 'consent',
+            headerName: 'Consent',
+            width: 190,
+            valueGetter: (_value, row)=>consentLabel(row, consentGroup).label,
+            renderCell: ({ row })=>{
+                const consent = consentLabel(row, consentGroup);
+                return /*#__PURE__*/ _jsx(Chip, {
+                    size: "small",
+                    variant: "outlined",
+                    color: consent.color,
+                    label: consent.label
+                });
+            }
+        },
+        /*
+      A SUBSCRIBER HAS NO PAGE of their own here, so the row opens nothing —
+      but taking somebody off an audience is the one act performed on one, and
+      it belongs in the trailing cluster with every other list's actions rather
+      than as a red text button sitting in the row.
+     */ listActionsColumn((row)=>{
+            var _row_email;
+            return /*#__PURE__*/ _jsx(ListRowActions, {
+                label: String((_row_email = row.email) != null ? _row_email : row.$id),
+                items: [
+                    {
+                        key: 'remove',
+                        label: 'Remove from this list',
+                        icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                            path: mdiAccountRemoveOutline.path,
+                            size: 0.8
+                        }),
+                        destructive: true,
+                        onClick: ()=>void handleRemove(row)
+                    }
+                ]
+            });
+        }, {
+            width: 72
+        })
+    ];
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 2,
+        sx: {
+            py: 2
+        },
+        children: [
+            findRule ? /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 1,
+                sx: {
+                    border: 1,
+                    borderColor: 'divider',
+                    borderRadius: 1,
+                    p: 1.5
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "overline",
+                        color: "text.secondary",
+                        children: 'Find people'
+                    }),
+                    (ruleSummary != null ? ruleSummary : []).map((clause)=>/*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            children: clause
+                        }, clause)),
+                    /*#__PURE__*/ _jsx(Box, {
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            variant: "outlined",
+                            disabled: busy,
+                            onClick: ()=>void handleFind(),
+                            children: busy ? 'Searching…' : 'Find matching people'
+                        })
+                    }),
+                    found ? /*#__PURE__*/ _jsx(Alert, {
+                        severity: found.matched ? 'info' : 'warning',
+                        children: (found.matched === 1 ? '1 person matches' : `${found.matched.toLocaleString()} people match`) + (found.truncated ? ` — this batch covers the first ${found.emails.length}. ` + 'Add them, then search again for the rest.' : '') + (found.complete ? '' : ' The search stopped at its read budget, so this is at ' + 'least that many rather than exactly.')
+                    }) : null,
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "text.secondary",
+                        children: 'Whoever you add stays on this list. It does not keep growing — ' + 'change the membership to live on the edit page if you want ' + 'new matches enrolled automatically.'
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'Add someone by typing their address, or paste a column of them. ' + 'Every address is checked against their consent record and both ' + 'suppression lists before anyone is added.'
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                useFlexGap: true,
+                sx: {
+                    flexWrap: 'wrap'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        label: "Email addresses",
+                        placeholder: "someone@example.com",
+                        multiline: true,
+                        minRows: 1,
+                        maxRows: 6,
+                        value: addInput,
+                        onChange: (event)=>setAddInput(event.target.value),
+                        helperText: addresses.length > 1 ? `${addresses.length} addresses` : 'One address, or paste many',
+                        sx: {
+                            flexGrow: 1,
+                            minWidth: 260
+                        }
+                    }),
+                    addresses.length > 1 ? null : /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        label: "Name",
+                        value: addName,
+                        onChange: (event)=>setAddName(event.target.value),
+                        sx: {
+                            minWidth: 180
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            variant: "outlined",
+                            disabled: busy || !addresses.length || Boolean(preview),
+                            onClick: ()=>void handlePreview(),
+                            children: busy ? 'Checking…' : 'Check'
+                        })
+                    })
+                ]
+            }),
+            preview ? /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 1,
+                children: [
+                    /*#__PURE__*/ _jsx(Alert, {
+                        severity: enrollable ? 'info' : 'warning',
+                        children: [
+                            preview.optedIn ? `${preview.optedIn} already opted in` : '',
+                            preview.needAttestation ? `${preview.needAttestation} with no opt-in on record` : '',
+                            preview.refused ? `${preview.refused} cannot be added at all` : ''
+                        ].filter(Boolean).join(' · ')
+                    }),
+                    preview.verdicts.filter((verdict)=>verdict.refusal).map((verdict)=>/*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "text.secondary",
+                            children: `${verdict.input} — ${verdict.summary}`
+                        }, verdict.input)),
+                    preview.needAttestation ? /*#__PURE__*/ _jsx(FormControlLabel, {
+                        control: /*#__PURE__*/ _jsx(Checkbox, {
+                            checked: attested,
+                            onChange: (event)=>setAttested(event.target.checked)
+                        }),
+                        label: /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            children: `I have permission to send marketing email to the ` + `${preview.needAttestation} ` + `${preview.needAttestation === 1 ? 'person' : 'people'} ` + 'above with no opt-in on record. This is recorded against ' + 'my account, with the date.'
+                        })
+                    }) : null,
+                    /*#__PURE__*/ _jsx(Box, {
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            variant: "contained",
+                            disabled: busy || !enrollable || preview.needAttestation > 0 && !attested,
+                            onClick: ()=>void handleAdd(),
+                            children: busy ? 'Adding…' : `Add ${enrollable}`
+                        })
+                    })
+                ]
+            }) : null,
+            (results == null ? void 0 : results.length) ? /*#__PURE__*/ _jsx(Stack, {
+                spacing: 0.5,
+                children: results.filter((result)=>!result.enrolled).map((result)=>{
+                    var _result_error;
+                    return /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "text.secondary",
+                        children: `${result.input} — not added. ${(_result_error = result.error) != null ? _result_error : ''}`
+                    }, result.input);
+                })
+            }) : null,
+            members.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'Nobody is on this list yet.'
+            }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(ListTable, {
+                        "aria-label": `Members of ${listName}`,
+                        rows: members,
+                        columns: columns,
+                        rowHeight: TABLE_ROW_HEIGHT,
+                        // Paged by the footer below, so the grid must not also slice.
+                        hideFooter: true
+                    }),
+                    /*#__PURE__*/ _jsx(ListPagination, {
+                        page: page,
+                        pageSize: pageSize,
+                        rowCount: members.length,
+                        hasMore: hasMore,
+                        onPageChange: setPage,
+                        onPageSizeChange: setPageSize
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: '"No basis on record" means nobody has recorded this person\'s ' + 'permission for this site — it is not a refusal. To record one, put ' + 'their address in the box above and state that you have their ' + 'permission; the statement is kept against your account, with the ' + 'date.'
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: 'Removing someone from a list is not an unsubscribe. It does not add ' + 'them to your suppression list, and it does not stop any other list ' + 'reaching them. If somebody asked you to stop, suppress the address.'
+            })
+        ]
+    });
+}
+ListMembersPanel.displayName = 'ListMembersPanel';
+export default ListMembersPanel;
+
+//# sourceMappingURL=list-members-panel.js.map