@aglyn/plugins-email 1.0.0-beta.143

package/src/lib/components/list-import-drawer.d.ts

@@ -0,0 +1,22 @@
+export interface ListImportDrawerProps {
+    open: boolean;
+    onClose: () => void;
+    hostId: string;
+    listId: string;
+    listName: string;
+    /**
+     * Called whenever the run enrolls anybody.
+     *
+     * The audience page's subscriber total is a server aggregate taken once, so
+     * an import that ran to completion behind a stale count would read as
+     * having done nothing. Fired per run rather than once at the end: a large
+     * import is watched, and a total that only moves at the end is a total that
+     * looks stuck.
+     */
+    onMembershipChanged?: () => void;
+}
+export declare function ListImportDrawer(props: ListImportDrawerProps): import("react").JSX.Element;
+export declare namespace ListImportDrawer {
+    var displayName: string;
+}
+export default ListImportDrawer;

package/src/lib/components/list-import-drawer.js

@@ -0,0 +1,662 @@
+/**
+ * @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";
+/**
+ * BRINGING AN EXISTING LIST IN — the screen.
+ *
+ * `docs/specs/email-competitive-gaps.md` G5: a customer arriving from another
+ * product has a list and, until now, no way to bring it. The server half is
+ * `server-list-import.ts`; this is the surface that walks an operator through
+ * it.
+ *
+ * ## A drawer, because an import is three decisions and not a field
+ *
+ * Choose the file, read what is in it, then say whether you have these
+ * people's permission. Stacked above the membership table those three steps
+ * would have nowhere to grow — which is exactly how the audience card's
+ * create form came to offer four of a rule's nine fields — and the middle
+ * step is the one that must not be cramped: it is where the screening
+ * warnings and the consent readout are shown, and both exist to be READ
+ * before the operator attests.
+ *
+ * Creating is a drawer and picking is a dialog, so this composes
+ * `NavigationDrawerComponent` directly, the same way the suppressions card's
+ * Add does — the console's wrapper around it lives in an application a plugin
+ * library may not import.
+ *
+ * ## The numbers on screen are the server's, always
+ *
+ * Nothing here parses a file, screens it, or decides anything about consent.
+ * Every count and every sentence comes back from a route that read the
+ * merchant's actual contacts and both suppression lists. A screen that
+ * computed its own 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.
+ *
+ * ## The run is a loop of bounded requests, and it says so
+ *
+ * A large file is not one request. The drawer calls `email/list-import-run`
+ * until it answers `complete`, showing the cursor against the total as it
+ * goes, so an import of forty thousand addresses is a progress bar rather
+ * than a spinner that either finishes or does not. Closing the drawer stops
+ * the loop and loses nothing: the job is durable, and reopening offers to
+ * resume it from where it stopped.
+ */ import { LIST_IMPORT_MAX_CHARACTERS, pluginDocsHelp } from "@aglyn/aglyn";
+import { HelpTip } from "@aglyn/shared-ui-jsx";
+import { ICON_VARIANT_CLOSE } from "@aglyn/shared-data-enums";
+import { Container, MdiIcon, SrOnly } from "@aglyn/shared-ui-jsx";
+import { NavigationDrawerComponent } from "@aglyn/shared-ui-jsx/components/navigation-drawer.component";
+import { ScrollTable } from "@aglyn/shared-ui-jsx/components/scroll-table.component";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { Alert, AlertTitle, Button, Checkbox, Chip, FormControlLabel, IconButton, LinearProgress, Stack, TableBody, TableCell, TableHead, TableRow, TextField, Typography } from "@mui/material";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useUser } from "@aglyn/tenant-feature-instance";
+import { authorizedFetch } from "@aglyn/shared-util-http/authorized-token";
+/** What a refusal reason is called on screen. */ const REFUSAL_LABELS = {
+    declined: 'Declined marketing email',
+    'no-basis': 'No opt-in on record',
+    'suppressed-host': 'Unsubscribed from this site',
+    'suppressed-platform': 'Bounced or reported as spam',
+    'unroutable-address': 'Not a valid address',
+    'no-address': 'No address'
+};
+export function ListImportDrawer(props) {
+    const { open, onClose, hostId, listId, listName, onMembershipChanged } = props;
+    const { data: user } = useUser();
+    const { enqueueSnackbar } = useSnackbar();
+    const [text, setText] = useState('');
+    const [fileName, setFileName] = useState('');
+    const [preview, setPreview] = useState(null);
+    const [attested, setAttested] = useState(false);
+    const [job, setJob] = useState(null);
+    const [busy, setBusy] = useState(false);
+    /**
+   * Set when the drawer closes mid-run, read by the loop.
+   *
+   * A ref and not state: the loop is an `async` function that has already
+   * captured its closure, so a state value it read would be the value from
+   * the render that started it — the loop would go on issuing requests after
+   * the operator closed the drawer, which is the one thing "closing stops it"
+   * has to mean.
+   */ const abandoned = useRef(false);
+    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
+    ]);
+    /*
+   * An unfinished import is looked for when the DRAWER OPENS and at no other
+   * time — never on the page's mount. A merchant reading their audiences pays
+   * nothing for a feature they did not reach for, which is the read-cost rule
+   * `emails-console-read-cost.spec.tsx` meters.
+   */ useEffect(()=>{
+        if (!open) return undefined;
+        abandoned.current = false;
+        let active = true;
+        void post('list-import-status', {}).then(({ ok, payload })=>{
+            if (!active || !ok) return;
+            const found = payload == null ? void 0 : payload.job;
+            if (found && found.status !== 'complete') setJob(found);
+        });
+        return ()=>{
+            active = false;
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        open
+    ]);
+    const reset = useCallback(()=>{
+        setText('');
+        setFileName('');
+        setPreview(null);
+        setAttested(false);
+        setJob(null);
+    }, []);
+    const handleClose = useCallback(()=>{
+        // Stops the loop; the job survives and the next open offers to resume it.
+        abandoned.current = true;
+        onClose();
+    }, [
+        onClose
+    ]);
+    const handleFile = useCallback(async (file)=>{
+        if (!file) return;
+        const contents = await file.text().catch(()=>'');
+        if (contents.length > LIST_IMPORT_MAX_CHARACTERS) {
+            return void enqueueSnackbar('That file is too large to read in one go. Split it and import the ' + 'pieces.', {
+                variant: 'warning',
+                allowDuplicate: true
+            });
+        }
+        setFileName(file.name);
+        setText(contents);
+        setPreview(null);
+        setAttested(false);
+    }, [
+        enqueueSnackbar
+    ]);
+    const handlePreview = useCallback(async ()=>{
+        if (busy || !text.trim()) return;
+        setBusy(true);
+        try {
+            const { ok, payload } = await post('list-import-preview', {
+                text
+            });
+            if (!ok) {
+                var _ref;
+                return void enqueueSnackbar((_ref = payload == null ? void 0 : payload.error) != null ? _ref : 'The file could not be read.', {
+                    variant: 'warning',
+                    allowDuplicate: true
+                });
+            }
+            setPreview(payload);
+            setAttested(false);
+        } catch (unused) {
+            enqueueSnackbar('The file could not be read.', {
+                variant: 'warning',
+                allowDuplicate: true
+            });
+        } finally{
+            setBusy(false);
+        }
+    }, [
+        busy,
+        text,
+        post,
+        enqueueSnackbar
+    ]);
+    /**
+   * Drives one job to completion, one bounded request at a time.
+   *
+   * The loop's exit conditions are `complete`, an error, and the operator
+   * closing the drawer. It never guesses how many runs a file needs — the
+   * server answers `complete` when the cursor has reached the total, which is
+   * the only party that knows.
+   */ const runToCompletion = useCallback(async (importId)=>{
+        setBusy(true);
+        try {
+            for(;;){
+                var _ref;
+                if (abandoned.current) return;
+                const { ok, payload } = await post('list-import-run', {
+                    importId
+                });
+                if (!ok) {
+                    var _ref1;
+                    return void enqueueSnackbar((_ref1 = payload == null ? void 0 : payload.error) != null ? _ref1 : 'The import could not continue.', {
+                        variant: 'warning',
+                        allowDuplicate: true
+                    });
+                }
+                setJob((previous)=>{
+                    var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;
+                    return {
+                        importId,
+                        status: (payload == null ? void 0 : payload.complete) ? 'complete' : 'running',
+                        total: Number((_ref = (_ref1 = payload == null ? void 0 : payload.total) != null ? _ref1 : previous == null ? void 0 : previous.total) != null ? _ref : 0),
+                        cursor: Number((_ref2 = payload == null ? void 0 : payload.cursor) != null ? _ref2 : 0),
+                        enrolled: ((_ref3 = previous == null ? void 0 : previous.enrolled) != null ? _ref3 : 0) + Number((_ref4 = payload == null ? void 0 : payload.ranEnrolled) != null ? _ref4 : 0),
+                        refused: ((_ref5 = previous == null ? void 0 : previous.refused) != null ? _ref5 : 0) + Number((_ref6 = payload == null ? void 0 : payload.ranRefused) != null ? _ref6 : 0),
+                        refusals: mergeCounts((_ref7 = previous == null ? void 0 : previous.refusals) != null ? _ref7 : {}, (_ref8 = payload == null ? void 0 : payload.refusals) != null ? _ref8 : {}),
+                        attested: (_ref9 = previous == null ? void 0 : previous.attested) != null ? _ref9 : false
+                    };
+                });
+                if (Number((_ref = payload == null ? void 0 : payload.ranEnrolled) != null ? _ref : 0)) onMembershipChanged == null ? void 0 : onMembershipChanged();
+                if (payload == null ? void 0 : payload.complete) {
+                    return void enqueueSnackbar('Import finished', {
+                        variant: 'success',
+                        persist: false
+                    });
+                }
+            }
+        } finally{
+            setBusy(false);
+        }
+    }, [
+        post,
+        enqueueSnackbar,
+        onMembershipChanged
+    ]);
+    const handleStart = useCallback(async ()=>{
+        if (busy || !preview) return;
+        setBusy(true);
+        try {
+            var _ref, _ref1;
+            const { ok, payload } = await post('list-import-start', {
+                text,
+                // 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;
+                setBusy(false);
+                return void enqueueSnackbar((_ref2 = payload == null ? void 0 : payload.error) != null ? _ref2 : 'The import could not be started.', {
+                    variant: 'warning',
+                    allowDuplicate: true
+                });
+            }
+            const started = {
+                importId: String((_ref = payload == null ? void 0 : payload.importId) != null ? _ref : ''),
+                status: 'running',
+                total: Number((_ref1 = payload == null ? void 0 : payload.total) != null ? _ref1 : 0),
+                cursor: 0,
+                enrolled: 0,
+                refused: 0,
+                refusals: {},
+                attested: (payload == null ? void 0 : payload.attested) === true
+            };
+            setJob(started);
+            setBusy(false);
+            await runToCompletion(started.importId);
+        } catch (unused) {
+            setBusy(false);
+            enqueueSnackbar('The import could not be started.', {
+                variant: 'warning',
+                allowDuplicate: true
+            });
+        }
+    }, [
+        busy,
+        preview,
+        text,
+        attested,
+        post,
+        enqueueSnackbar,
+        runToCompletion
+    ]);
+    const running = !!job && job.status !== 'complete';
+    const finished = !!job && job.status === 'complete';
+    return /*#__PURE__*/ _jsx(NavigationDrawerComponent, {
+        open: open,
+        anchor: "right",
+        variant: "temporary",
+        onClose: handleClose,
+        AppBarProps: {
+            color: 'surface'
+        },
+        appBarLeft: /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsxs(IconButton, {
+                    color: "inherit",
+                    edge: "start",
+                    onClick: handleClose,
+                    sx: {
+                        mr: 2
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(MdiIcon, {
+                            path: ICON_VARIANT_CLOSE.path
+                        }),
+                        /*#__PURE__*/ _jsx(SrOnly, {
+                            children: 'close drawer'
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "h6",
+                    component: "div",
+                    children: `Import into "${listName}"`
+                }),
+                /*#__PURE__*/ _jsx(HelpTip, _extends({}, pluginDocsHelp('emailCampaigns', {
+                    anchor: '#import-a-list'
+                })))
+            ]
+        }),
+        appBarRight: /*#__PURE__*/ _jsx(Button, {
+            variant: "outlined",
+            color: "inherit",
+            onClick: handleClose,
+            children: finished ? 'Done' : 'Cancel'
+        }),
+        children: /*#__PURE__*/ _jsx(Container, {
+            gutterY: true,
+            children: /*#__PURE__*/ _jsx(Stack, {
+                spacing: 2,
+                children: job ? /*#__PURE__*/ _jsx(ImportProgressPanel, {
+                    job: job,
+                    busy: busy,
+                    onResume: ()=>void runToCompletion(job.importId),
+                    onAnother: reset
+                }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            children: 'A CSV with an email column, or one address per line. Every ' + 'address goes through the same checks as one you type in ' + 'by hand: anyone who unsubscribed, bounced, or told you ' + 'they do not want marketing email is refused, and nothing ' + 'you upload can override that.'
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            sx: {
+                                alignItems: 'center'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsxs(Button, {
+                                    variant: "outlined",
+                                    component: "label",
+                                    disabled: busy,
+                                    children: [
+                                        'Choose file',
+                                        /*#__PURE__*/ _jsx("input", {
+                                            type: "file",
+                                            accept: ".csv,.txt,text/csv,text/plain",
+                                            hidden: true,
+                                            onChange: (event)=>{
+                                                var _event_target_files;
+                                                return void handleFile((_event_target_files = event.target.files) == null ? void 0 : _event_target_files[0]);
+                                            }
+                                        })
+                                    ]
+                                }),
+                                fileName ? /*#__PURE__*/ _jsx(Chip, {
+                                    size: "small",
+                                    variant: "outlined",
+                                    label: fileName
+                                }) : null
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(TextField, {
+                            label: "Or paste the list",
+                            value: text,
+                            onChange: (event)=>{
+                                setText(event.target.value);
+                                setFileName('');
+                                /*
+                   * Any edit invalidates the answer. A preview belongs to the
+                   * exact text it was run for, and leaving a stale one on
+                   * screen would show counts, and an attestation checkbox,
+                   * for a file the operator has since changed.
+                   */ setPreview(null);
+                                setAttested(false);
+                            },
+                            multiline: true,
+                            minRows: 4,
+                            maxRows: 12,
+                            fullWidth: true,
+                            helperText: 'One address per line, or paste the whole CSV including ' + 'its header row.'
+                        }),
+                        preview ? /*#__PURE__*/ _jsx(ImportReviewPanel, {
+                            preview: preview,
+                            attested: attested,
+                            onAttestedChange: setAttested
+                        }) : null,
+                        /*#__PURE__*/ _jsx(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            sx: {
+                                justifyContent: 'flex-end'
+                            },
+                            children: preview ? /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                disabled: busy || preview.usable === 0,
+                                onClick: ()=>void handleStart(),
+                                children: attested ? `Import ${preview.usable} addresses` : `Import the ${preview.optedIn} with an opt-in`
+                            }) : /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                disabled: busy || !text.trim(),
+                                onClick: ()=>void handlePreview(),
+                                children: busy ? 'Checking…' : 'Check this file'
+                            })
+                        })
+                    ]
+                })
+            })
+        })
+    });
+}
+ListImportDrawer.displayName = 'ListImportDrawer';
+/** Adds two refusal tallies together. */ function mergeCounts(base, extra) {
+    const merged = _extends({}, base);
+    for (const [key, value] of Object.entries(extra)){
+        var _merged_key;
+        merged[key] = ((_merged_key = merged[key]) != null ? _merged_key : 0) + Number(value != null ? value : 0);
+    }
+    return merged;
+}
+/**
+ * WHAT IS IN THE FILE, and the one question the operator has to answer.
+ *
+ * Three blocks in the order they should be read: what the file contains, what
+ * the screening noticed, and what the consent gate said about a sample. The
+ * attestation control comes last on purpose — it is the act, and an act
+ * offered above its own evidence is an act taken without it.
+ */ function ImportReviewPanel(props) {
+    const { preview, attested, onAttestedChange } = props;
+    const { screening } = preview;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ _jsxs(Alert, {
+                severity: "info",
+                children: [
+                    /*#__PURE__*/ _jsx(AlertTitle, {
+                        children: `${preview.usable} addresses in this file`
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        spacing: 0.5,
+                        children: [
+                            preview.duplicates ? /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                children: `${preview.duplicates} repeated addresses were collapsed — the ` + 'same person twice is one member.'
+                            }) : null,
+                            preview.unusable ? /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                children: `${preview.unusable} lines are not email addresses and will be ` + `skipped${preview.unusableSamples.length ? `, starting with: ${preview.unusableSamples.slice(0, 3).join(', ')}` : ''}.`
+                            }) : null,
+                            preview.overCeiling ? /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                children: `This file names more than ${preview.ceiling} addresses. Only ` + 'the first are staged — split the file and import the rest ' + 'separately. Nothing already on the list is affected.'
+                            }) : null
+                        ]
+                    })
+                ]
+            }),
+            screening.purchaseTellColumns.length ? /*#__PURE__*/ _jsxs(Alert, {
+                severity: "warning",
+                children: [
+                    /*#__PURE__*/ _jsx(AlertTitle, {
+                        children: 'This file looks bought or appended'
+                    }),
+                    `Its columns include ${screening.purchaseTellColumns.join(', ')}. ` + 'Purchased, rented and appended lists are not allowed, and ' + 'importing one puts every site sending through this domain at ' + 'risk. If the column name is a coincidence, carry on.'
+                ]
+            }) : null,
+            screening.roleAccounts ? /*#__PURE__*/ _jsxs(Alert, {
+                severity: "warning",
+                children: [
+                    /*#__PURE__*/ _jsx(AlertTitle, {
+                        children: `${screening.roleAccounts} shared mailboxes`
+                    }),
+                    `Addresses like ${screening.roleAccountSamples.slice(0, 3).join(', ')} reach a mailbox several people read, or nobody. ` + 'They are a common sign of a list built by collecting addresses ' + 'rather than by people signing up. They will be imported if you ' + 'go ahead.'
+                ]
+            }) : null,
+            /*#__PURE__*/ _jsxs(Alert, {
+                severity: preview.needAttestation ? 'warning' : 'success',
+                children: [
+                    /*#__PURE__*/ _jsx(AlertTitle, {
+                        children: preview.sampleSize < preview.usable ? `Checked the first ${preview.sampleSize} of ${preview.usable}` : 'Checked every address'
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        spacing: 0.5,
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                children: `${preview.optedIn} already have an opt-in on record, ` + `${preview.needAttestation} have no opt-in on record, and ` + `${preview.refused} cannot be added at all.`
+                            }),
+                            preview.sampleSize < preview.usable ? /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                children: 'The rest are checked the same way as the import runs, and ' + 'the result is reported as it goes.'
+                            }) : null
+                        ]
+                    })
+                ]
+            }),
+            preview.verdicts.length ? /*#__PURE__*/ _jsxs(ScrollTable, {
+                size: "small",
+                children: [
+                    /*#__PURE__*/ _jsx(TableHead, {
+                        children: /*#__PURE__*/ _jsxs(TableRow, {
+                            children: [
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    children: 'Address'
+                                }),
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    children: 'What we know'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(TableBody, {
+                        children: preview.verdicts.slice(0, 10).map((verdict, index)=>{
+                            var _verdict_email;
+                            return /*#__PURE__*/ _jsxs(TableRow, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        children: (_verdict_email = verdict.email) != null ? _verdict_email : verdict.input
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        children: /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "body2",
+                                            color: "text.secondary",
+                                            children: verdict.summary
+                                        })
+                                    })
+                                ]
+                            }, `${verdict.input}-${index}`);
+                        })
+                    })
+                ]
+            }) : null,
+            preview.needAttestation ? /*#__PURE__*/ _jsx(FormControlLabel, {
+                control: /*#__PURE__*/ _jsx(Checkbox, {
+                    checked: attested,
+                    onChange: (event)=>onAttestedChange(event.target.checked)
+                }),
+                label: /*#__PURE__*/ _jsxs(Typography, {
+                    variant: "body2",
+                    children: [
+                        'I have these people’s permission to send them marketing ' + 'email, and I can produce the record of it if asked. This ' + 'statement is stored against my account, with today’s date, ' + 'on every address it admits.',
+                        screening.declaresBasis ? ' The opt-in source and date your file declares are kept with it.' : ''
+                    ]
+                })
+            }) : null,
+            preview.needAttestation && !attested ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'Without that statement the import adds only the addresses that ' + 'already have an opt-in on record. Nobody else is added, and ' + 'nothing is deleted.'
+            }) : null
+        ]
+    });
+}
+/** How far the run has got, and what it did. */ function ImportProgressPanel(props) {
+    const { job, busy, onResume, onAnother } = props;
+    const done = job.status === 'complete';
+    const percent = job.total ? Math.min(job.cursor / job.total * 100, 100) : 0;
+    const refusals = Object.entries(job.refusals).filter(([, count])=>count > 0);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: done ? `Finished. ${job.enrolled} of ${job.total} addresses were added.` : `${job.cursor} of ${job.total} addresses checked.`
+            }),
+            /*#__PURE__*/ _jsx(LinearProgress, {
+                variant: "determinate",
+                value: percent,
+                sx: {
+                    borderRadius: 1
+                }
+            }),
+            refusals.length ? /*#__PURE__*/ _jsxs(ScrollTable, {
+                size: "small",
+                children: [
+                    /*#__PURE__*/ _jsx(TableHead, {
+                        children: /*#__PURE__*/ _jsxs(TableRow, {
+                            children: [
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    children: 'Not added'
+                                }),
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    align: "right",
+                                    children: 'Addresses'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(TableBody, {
+                        children: refusals.map(([reason, count])=>{
+                            var _REFUSAL_LABELS_reason;
+                            return /*#__PURE__*/ _jsxs(TableRow, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        children: (_REFUSAL_LABELS_reason = REFUSAL_LABELS[reason]) != null ? _REFUSAL_LABELS_reason : reason
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        align: "right",
+                                        children: count
+                                    })
+                                ]
+                            }, reason);
+                        })
+                    })
+                ]
+            }) : null,
+            !done ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "info",
+                children: 'Large files are added in batches, so this takes a few minutes. ' + 'You can close this — the import picks up where it stopped when ' + 'you come back.'
+            }) : null,
+            /*#__PURE__*/ _jsx(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    justifyContent: 'flex-end'
+                },
+                children: done ? /*#__PURE__*/ _jsx(Button, {
+                    variant: "outlined",
+                    onClick: onAnother,
+                    children: 'Import another file'
+                }) : /*#__PURE__*/ _jsx(Button, {
+                    variant: "contained",
+                    disabled: busy,
+                    onClick: onResume,
+                    children: busy ? 'Importing…' : 'Resume import'
+                })
+            })
+        ]
+    });
+}
+export default ListImportDrawer;
+
+//# sourceMappingURL=list-import-drawer.js.map