@aglyn/plugins-marketing 1.0.0-beta.143

package/src/lib/components/campaign-detail-card.js

@@ -0,0 +1,771 @@
+/**
+ * @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";
+import { mdiDeleteOutline, mdiEyeOutline, mdiPaletteOutline, mdiPencilOutline } from "@aglyn/shared-data-mdi";
+import { AppLink, CardDisplay, MdiIcon, useConfirmationContext } from "@aglyn/shared-ui-jsx";
+import { Figure, RateRow, Section } from "@aglyn/shared-ui-email-campaigns/components/report-figures";
+import { ListRowActions, ListTable, listActionsColumn } from "@aglyn/shared-ui-jsx/components/list-table.component";
+import RowActionsMenu from "@aglyn/shared-ui-jsx/components/row-actions-menu.component";
+import { TABLE_ROW_HEIGHT } from "@aglyn/shared-ui-jsx/const/table-pagination";
+import { ceilingedWindow } from "@aglyn/tenant-feature-instance/hooks/host-collection-queries";
+import { PageHeaderRecord, pluginDocsHelp } from "@aglyn/aglyn";
+import { Alert, Box, Button, Chip, Divider, Stack, Typography } from "@mui/material";
+import { collection, deleteField, doc, documentId, limit, orderBy, query, updateDoc, where } from "firebase/firestore";
+import { useCallback, useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { useFirestore, useFirestoreCollection, useFirestoreDoc, useOrgDataScope } from "@aglyn/tenant-feature-instance";
+import { campaignRollup, campaignSendDisplay, campaignWindowState, emailListTimeMs } from "@aglyn/shared-ui-email-campaigns/model";
+import CampaignComposer from "./campaign-composer.js";
+import CampaignEditDrawer from "./campaign-edit-drawer.js";
+import { CampaignConversionsSection, CampaignDestinationsSection, CampaignRevenueSection } from "./campaign-reach-sections.js";
+import CampaignMembersSection from "./campaign-members-section.js";
+import CampaignReportCard from "./campaign-report-card.js";
+import { useCampaignManageApi } from "./use-campaign-send-api.js";
+import { useEmailsHubPath } from "./use-emails-hub-path.js";
+import { useCampaignTopicOptions } from "./use-campaign-topic-options.js";
+/** How many of a campaign's emails the detail page enumerates. */ const CAMPAIGN_EMAIL_CEILING = 50;
+const detailDocsHelp = pluginDocsHelp('emailCampaigns', {
+    anchor: '#the-campaign-report',
+    excerpt: 'A campaign groups the emails sent to its lists. The figures here are ' + 'the sum across those emails, and each one keeps its own report.'
+});
+/**
+ * A rolled-up figure, in the shared `Figure`'s shape.
+ *
+ * The note is where an aggregate differs from a single send's count: a total
+ * measured over fewer emails than the campaign holds says which part of the
+ * campaign it describes, rather than presenting a partial sum as a complete
+ * one. `null` still renders as an em dash and says "not recorded", which is
+ * the property the shared component already owns.
+ */ const rolled = (value)=>({
+        value: value.value,
+        note: value.value !== null && value.recorded < value.sends ? `across ${value.recorded} of ${value.sends} emails` : `across ${value.sends} email${value.sends === 1 ? '' : 's'}`
+    });
+/**
+ * ONE CAMPAIGN: its lists, what it caused, what it earned, where it sent
+ * people, and the emails it did all of that with.
+ *
+ * ## Why the emails are a section rather than the page
+ *
+ * A campaign reaches people by email, which is not the same as a campaign
+ * BEING a list of emails. It runs over a window, against a set of audiences,
+ * and the pages its links land on, the money credited to it and the
+ * conversions credited to it are facts about the campaign that no single
+ * message in it holds. So the body is sectioned — what it caused, what it
+ * earned, where it sent people, then the mail's own figures, then its emails
+ * — and each section names the population it describes.
+ *
+ * The ORDER is the part that says which of those the page is about. Delivery,
+ * engagement and rates are mechanics of a message; a page that met the reader
+ * with them and reached the outcomes only after scrolling was a mail report
+ * whatever its headings claimed. `campaign-report-card.tsx` — the page a
+ * campaign of one email gets — carries the same two outcome headings first,
+ * for the same reason and in the same words.
+ *
+ * The three middle sections live in `campaign-reach-sections.tsx`, which is
+ * also where the reason a campaign cannot simply DECLARE the screens and
+ * forms it runs across is written down: no such edge is stored, attribution
+ * is the mechanism, and all three sections join on this campaign's send ids.
+ *
+ * ## Why this resolves two kinds of id
+ *
+ * The id in `campaigns/{id}` may name a campaign CONTAINER or a single SEND,
+ * and which it is is answered by reading: a container at `emailCampaigns/{id}`
+ * renders this page, and anything else falls through to that send's own
+ * report.
+ *
+ * Not every send belongs to a container. One written before campaigns grouped
+ * their emails names none, its own id is the only id the URL can carry, and
+ * that id is also inside the HMAC of every unsubscribe footer already
+ * delivered — so a send id has to go on addressing a page rather than a 404.
+ * The fall-through is what makes the container additive: no send document is
+ * rewritten and no id is reassigned.
+ *
+ * The extra read is one document, and it buys the guarantee that a pasted
+ * report link resolves whichever kind of id it carries.
+ */ export function CampaignDetailCard(props) {
+    var _campaign_listIds;
+    const { hostId, campaignId, basePath } = props;
+    const firestore = useFirestore();
+    // The sibling hub, for the two records this page links to but does not own:
+    // each message's report and the template it was built from.
+    const emailsHub = useEmailsHubPath();
+    const router = useRouter();
+    const { scope: dataScope } = useOrgDataScope({
+        hostId
+    });
+    const { confirm } = useConfirmationContext();
+    const { enqueueSnackbar } = useSnackbar();
+    const manageApi = useCampaignManageApi(hostId);
+    const [composing, setComposing] = useState(false);
+    const [editing, setEditing] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [saveError, setSaveError] = useState(null);
+    const [deleting, setDeleting] = useState(false);
+    const { data: campaign, status } = useFirestoreDoc(()=>doc(firestore, 'hosts', hostId, 'emailCampaigns', campaignId), [
+        firestore,
+        hostId,
+        campaignId
+    ]);
+    /*
+   * ONLY WHEN THE ID NAMES A CAMPAIGN.
+   *
+   * Both queries below are gated on the container having been found, because
+   * the other half of this component is the single-send report — and that
+   * screen's whole design is that it reads two documents whatever the size of
+   * the audience. Listening unconditionally would add two collection reads to
+   * every legacy report URL, which is the cost the report route was split out
+   * to avoid. Not listening is what a null builder means.
+   *
+   * The campaign's emails come back by the field each send carries: equality
+   * on one field ordered by DOCUMENT NAME, which Firestore's automatic
+   * single-field index serves without a composite one. Ordering on a date
+   * would need that index AND would drop every send missing that particular
+   * date — a sent send carries `sentAt`, a scheduled one `sendAtMs`, and
+   * neither is on both. Sorted by date below, over a window this page holds
+   * whole.
+   *
+   * One document past the ceiling, so "this campaign has more emails than are
+   * listed" is a fact rather than a guess.
+   */ const { data: sendDocs } = useFirestoreCollection(()=>campaign ? query(collection(firestore, 'hosts', hostId, 'campaigns'), where('emailCampaignId', '==', campaignId), orderBy(documentId()), limit(CAMPAIGN_EMAIL_CEILING + 1)) : null, [
+        firestore,
+        hostId,
+        campaignId,
+        Boolean(campaign)
+    ], {
+        idField: '$id'
+    });
+    const { data: listDocs } = useFirestoreCollection(()=>campaign && dataScope ? query(collection(firestore, dataScope[0], dataScope[1], 'lists'), limit(50)) : null, [
+        firestore,
+        dataScope,
+        Boolean(campaign)
+    ], {
+        idField: '$id'
+    });
+    /*
+   * The org's topic catalog, read only while the EDIT DRAWER is open.
+   *
+   * It fills one picker in that drawer and is drawn nowhere else on this
+   * page, so reading it on mount would charge every reader who came for the
+   * campaign's numbers for a field they are not looking at. The composer
+   * carries its own read of the same catalog, behind its own button, for the
+   * same reason.
+   */ const { topics, source: topicSource } = useCampaignTopicOptions(hostId, {
+        enabled: editing
+    });
+    const topicOptions = useMemo(()=>topics.map((topic)=>({
+                value: topic.id,
+                label: topic.name
+            })), [
+        topics
+    ]);
+    const { rows: readSends, truncated: sendsTruncated } = ceilingedWindow(sendDocs, CAMPAIGN_EMAIL_CEILING);
+    /*
+   * Newest first on the time each email SITS at — its send time where it has
+   * one, its creation where it does not. A draft has neither `sentAt` nor
+   * `sendAtMs`, so ordering on the send time alone gave every draft the key 0
+   * and filed the email a merchant is in the middle of writing below mail
+   * sent years ago.
+   */ const sends = useMemo(()=>[
+            ...readSends
+        ].sort((a, b)=>emailListTimeMs(b) - emailListTimeMs(a)), [
+        readSends
+    ]);
+    const rollup = useMemo(()=>campaignRollup(sends), [
+        sends
+    ]);
+    // The ids the two sections beneath the figures join on. Derived from the
+    // window this card already holds, so neither of them reads the send list
+    // again to find out which emails the campaign has.
+    const sendIds = useMemo(()=>sends.map((send)=>String(send.$id)).filter(Boolean), [
+        sends
+    ]);
+    /*==========================================
+   * SAVING THE CONTAINER, WITH THE CLIENT SDK.
+   *
+   * The same door the create drawer already uses. `emailCampaigns` is
+   * deliberately outside the security rules' server-only exclusion list — a
+   * container holds no counter, no consent record and no entitlement input,
+   * so an editor who writes one cannot buy themselves a send — and giving the
+   * edit a route of its own would be a second writer to keep in step with the
+   * create.
+   *
+   * `updateDoc` rather than a merge-set, because this is an edit of a
+   * document that exists: a set would CREATE a campaign at this id for
+   * somebody who deleted it in another tab, which is the shape the delivery
+   * webhook is careful about on the send collection for the same reason.
+   *
+   * A cleared date is written as `null` — the absence the model already
+   * spells — and a cleared topic REMOVES the field, because the model has no
+   * null topic and `campaignTopicId` is handed to the composer as one.
+   *=========================================*/ const handleSave = useCallback(async (values)=>{
+        if (saving) return;
+        setSaving(true);
+        setSaveError(null);
+        try {
+            await updateDoc(doc(firestore, 'hosts', hostId, 'emailCampaigns', campaignId), {
+                name: values.name,
+                startAtMs: values.startAtMs,
+                endAtMs: values.endAtMs,
+                listIds: values.listIds,
+                topicId: values.topicId ? values.topicId : deleteField()
+            });
+            setEditing(false);
+            enqueueSnackbar('Campaign updated', {
+                variant: 'success',
+                persist: false
+            });
+        } catch (error) {
+            console.error(error);
+            setSaveError('The campaign could not be saved');
+        } finally{
+            setSaving(false);
+        }
+    }, [
+        campaignId,
+        enqueueSnackbar,
+        firestore,
+        hostId,
+        saving
+    ]);
+    /*==========================================
+   * DELETING THE CONTAINER, WHICH IS NOT DELETING ITS MAIL.
+   *
+   * The route detaches every email first and then removes the campaign, so
+   * what a merchant is agreeing to is the grouping going away — the emails
+   * stay, keep their ids, keep their reports, and read afterwards as single
+   * sends. Their unsubscribe links carry those ids inside an HMAC and go on
+   * working, which is why the container can never take them with it.
+   *
+   * The confirmation says the count and says what a delete does NOT do. A
+   * scheduled email inside the campaign still goes out at its time — stopping
+   * somebody's mail is `cancel`, on that email's own page — and a merchant
+   * who reads "delete campaign" as "stop the campaign" has to be told
+   * otherwise before they press it, not after.
+   *=========================================*/ const handleDelete = useCallback(async ()=>{
+        if (deleting) return;
+        /*
+     * Emails with mail still to go: the ones waiting for their time AND the
+     * ones part way through an audience larger than one batch. Both are what
+     * a merchant needs warning about, and counting only `scheduled` would
+     * miss the case that needs it most — a campaign that is delivering right
+     * now is stored as `scheduled` too, but `rollup.scheduled` is the
+     * narrower reading that excludes it.
+     */ const unfinished = rollup.scheduled + rollup.sending;
+        const agreed = await confirm({
+            title: 'Delete this campaign?',
+            description: (sends.length ? `The ${sends.length.toLocaleString()} ` + `${sends.length === 1 ? 'email' : 'emails'} in it are kept — ` + 'each keeps its own report and its unsubscribe links, and they ' + 'appear in the campaigns list as single sends. ' : 'It holds no emails. ') + (unfinished ? `${unfinished.toLocaleString()} of them ${unfinished === 1 ? 'is' : 'are'} still going out or still due, and deleting the campaign does ` + 'not stop that — the sender picks each one up from its own ' + 'record. Stop a send from its own page. ' : '') + 'Any screens, forms and contacts assigned to it come out of it and ' + 'are otherwise untouched. Only the campaign itself goes.',
+            confirmationText: 'Delete campaign'
+        }).then(()=>true).catch(()=>false);
+        if (!agreed) return;
+        setDeleting(true);
+        try {
+            const { response, payload } = await manageApi({
+                action: 'deleteCampaign',
+                campaignId
+            });
+            if (!response.ok) {
+                var _ref;
+                return void enqueueSnackbar((_ref = payload == null ? void 0 : payload.error) != null ? _ref : 'The campaign could not be deleted', {
+                    variant: 'warning',
+                    allowDuplicate: true
+                });
+            }
+            enqueueSnackbar('Campaign deleted', {
+                variant: 'success',
+                persist: false
+            });
+            router.push(`${basePath}/campaigns`);
+        } catch (error) {
+            console.error(error);
+            enqueueSnackbar('The campaign could not be deleted', {
+                variant: 'error',
+                allowDuplicate: true
+            });
+        } finally{
+            setDeleting(false);
+        }
+    }, [
+        basePath,
+        campaignId,
+        confirm,
+        deleting,
+        enqueueSnackbar,
+        manageApi,
+        rollup.scheduled,
+        rollup.sending,
+        router,
+        sends.length
+    ]);
+    // Still settling. Falling through to the send report here would flash "this
+    // campaign could not be loaded" on every open of a campaign that exists.
+    if (!campaign && status === 'loading') return null;
+    /*
+   * NOT A CONTAINER — so it is a send id, and the send's own report is what
+   * this URL has always meant.
+   */ if (!campaign) {
+        return /*#__PURE__*/ _jsx(CampaignReportCard, {
+            hostId: hostId,
+            campaignId: campaignId,
+            basePath: basePath
+        });
+    }
+    const listIds = (_campaign_listIds = campaign.listIds) != null ? _campaign_listIds : [];
+    const names = new Map((listDocs != null ? listDocs : []).map((list)=>{
+        var _list_name;
+        return [
+            String(list.$id),
+            String((_list_name = list.name) != null ? _list_name : list.$id)
+        ];
+    }));
+    /*==========================================
+   * ONE EMAIL'S PAGE — the same one every other route to that record opens.
+   *
+   * The Emails hub's `emails/{sendId}`, which is where the messages list and
+   * a template's messages table also send a reader. One record has one page:
+   * a link that resolved somewhere else depending on which list it was
+   * clicked in would give the same message two pages, and the reader would
+   * have no way to tell which one they were on.
+   *
+   * `campaigns/{sendId}` on THIS hub goes on resolving as well, through the
+   * fall-through at the top of this file. That is not a convenience — every
+   * unsubscribe footer already delivered carries `cid={sendId}`, those
+   * messages sit in inboxes forever, and merchants paste report URLs into
+   * their own mail. Which link the console GENERATES and which URLs ANSWER
+   * are two separate questions, and only the first is decided here.
+   *
+   * Nor is a redirect the answer to the second. A redirect would be another
+   * thing to be wrong about an id that is inside an HMAC; a page that keeps
+   * working has nothing to get wrong, and it costs nothing to leave standing.
+   *=========================================*/ const sendHref = (send)=>emailsHub ? `${emailsHub}/messages/${send.$id}` : undefined;
+    /**
+   * What one of this campaign's emails can be opened into.
+   *
+   * The same two the Emails hub offers, less the campaign — this page IS the
+   * campaign. Both destinations are records the Emails console owns, so they
+   * are built from {@link useEmailsHubPath} rather than from this surface's
+   * own `basePath`.
+   *
+   * A message composed inline was built from no template, so that entry is
+   * shown DISABLED with the reason rather than hidden: an absent control and
+   * an inapplicable one look identical, and only one is honest.
+   */ const sendActions = (send)=>{
+        var _send_templateScreenId;
+        const templateScreenId = String((_send_templateScreenId = send.templateScreenId) != null ? _send_templateScreenId : '');
+        return [
+            {
+                key: 'details',
+                label: 'Open report',
+                icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiEyeOutline.path,
+                    size: 0.8
+                }),
+                href: sendHref(send),
+                disabled: !sendHref(send),
+                disabledReason: 'This site’s console URL has not resolved yet'
+            },
+            {
+                key: 'template',
+                label: 'Open its template',
+                icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiPaletteOutline.path,
+                    size: 0.8
+                }),
+                href: templateScreenId && emailsHub ? `${emailsHub}/templates/${templateScreenId}` : undefined,
+                disabled: !templateScreenId || !emailsHub,
+                disabledReason: templateScreenId ? 'This site’s console URL has not resolved yet' : 'This message was not built from a template'
+            }
+        ];
+    };
+    /*
+   * The campaign's emails, on the surface's own row grammar: the row opens
+   * the email's report, its subject is also a real link so it can be
+   * middle-clicked and copied, and the trailing cluster holds the actions.
+   * The window is one the card already holds, so the grid pages it.
+   */ const sendColumns = [
+        {
+            field: 'subject',
+            headerName: 'Subject',
+            flex: 1,
+            minWidth: 220,
+            valueGetter: (_value, send)=>send.subject || send.$id,
+            /*
+        Plain text until the Emails hub resolves: a link with no destination
+        is worse than none, and this cell is the message's subject either way.
+       */ renderCell: ({ row: send, value })=>{
+                const href = sendHref(send);
+                return href ? /*#__PURE__*/ _jsx(AppLink, {
+                    href: href,
+                    // The row's own handler would fire too and push the same route
+                    // twice — one history entry per back press.
+                    onClick: (event)=>event.stopPropagation(),
+                    children: value
+                }) : value;
+            }
+        },
+        {
+            /*
+        WHAT THE EMAIL IS DOING, not the field it stores.
+
+        This branched on the status, which reads "Scheduled" about an email
+        that has delivered five hundred messages and is between batches — the
+        stored state the processor claims to resume it. The derivation reads
+        the counters beside the status; the due date is appended only where
+        there is genuinely nothing delivered yet, which is the one case a time
+        answers.
+       */ field: 'state',
+            headerName: 'State',
+            width: 220,
+            valueGetter: (_value, send)=>{
+                const display = campaignSendDisplay(send);
+                return display.state === 'pending' && send.sendAtMs ? `${display.label} · ${new Date(send.sendAtMs).toLocaleString()}` : display.label;
+            },
+            renderCell: ({ row: send, value })=>{
+                const state = campaignSendDisplay(send).state;
+                return /*#__PURE__*/ _jsx(Chip, {
+                    size: "small",
+                    color: state === 'sending' ? 'info' : state === 'stopped' ? 'warning' : undefined,
+                    label: value
+                });
+            }
+        },
+        {
+            /*
+        Sent over addressed, on one line: the two figures only mean anything
+        beside each other, and the gap between them is the suppression list
+        doing its work.
+       */ field: 'sent',
+            headerName: 'Sent',
+            type: 'number',
+            align: 'right',
+            headerAlign: 'right',
+            width: 110,
+            valueGetter: (_value, send)=>{
+                var _ref;
+                var _send_stats;
+                return Number((_ref = (_send_stats = send.stats) == null ? void 0 : _send_stats.sent) != null ? _ref : 0);
+            },
+            renderCell: ({ row: send })=>{
+                var _ref, _ref1;
+                var _send_stats, _send_stats1;
+                return `${(_ref = (_send_stats = send.stats) == null ? void 0 : _send_stats.sent) != null ? _ref : 0}/${(_ref1 = (_send_stats1 = send.stats) == null ? void 0 : _send_stats1.recipients) != null ? _ref1 : 0}`;
+            }
+        },
+        {
+            field: 'opens',
+            headerName: 'Opens',
+            type: 'number',
+            align: 'right',
+            headerAlign: 'right',
+            width: 100,
+            valueGetter: (_value, send)=>{
+                var _ref;
+                var _send_stats;
+                return Number((_ref = (_send_stats = send.stats) == null ? void 0 : _send_stats.opens) != null ? _ref : 0);
+            },
+            valueFormatter: (value)=>value.toLocaleString()
+        },
+        {
+            field: 'clicks',
+            headerName: 'Clicks',
+            type: 'number',
+            align: 'right',
+            headerAlign: 'right',
+            width: 100,
+            valueGetter: (_value, send)=>{
+                var _ref;
+                var _send_stats;
+                return Number((_ref = (_send_stats = send.stats) == null ? void 0 : _send_stats.clicks) != null ? _ref : 0);
+            },
+            valueFormatter: (value)=>value.toLocaleString()
+        },
+        listActionsColumn((send)=>/*#__PURE__*/ _jsx(ListRowActions, {
+                label: String(send.subject || send.$id),
+                items: sendActions(send)
+            }), {
+            width: 72
+        })
+    ];
+    const windowState = campaignWindowState(campaign, Date.now());
+    const start = campaign.startAtMs ? new Date(campaign.startAtMs).toLocaleDateString() : '';
+    const end = campaign.endAtMs ? new Date(campaign.endAtMs).toLocaleDateString() : '';
+    /* The card, named so the page chrome above it is a plain list of
+     what this surface publishes upward. */ const card = /*#__PURE__*/ _jsxs(CardDisplay, {
+        header: 'Campaign',
+        subheader: start || end ? `${start || 'Open'} – ${end || 'open-ended'}` : 'No campaign dates',
+        help: detailDocsHelp,
+        HeaderProps: {
+            /*
+          NAVIGATION, THEN THE OVERFLOW.
+
+          Editing and deleting a campaign live here rather than on the
+          campaigns table, because a record is edited on its own page in this
+          console. `RowActionsMenu` is named for table rows and its rendering
+          is not — a kebab and a menu whose items carry `destructive` and
+          `disabled` — so reusing it is what keeps this overflow behaving like
+          every other one on the surface, including the email page's.
+         */ action: /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Button, _extends({
+                        component: AppLink
+                    }, {
+                        componentVariant: 'naked',
+                        nativeButton: false
+                    }, {
+                        href: `${basePath}/campaigns`,
+                        size: "small",
+                        color: "primary",
+                        children: 'All campaigns'
+                    })),
+                    /*#__PURE__*/ _jsx(RowActionsMenu, {
+                        label: campaign.name || 'Campaign',
+                        items: [
+                            {
+                                key: 'edit',
+                                label: 'Edit campaign',
+                                icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                                    path: mdiPencilOutline.path,
+                                    size: 0.8
+                                }),
+                                onClick: ()=>{
+                                    setSaveError(null);
+                                    setEditing(true);
+                                }
+                            },
+                            {
+                                key: 'delete',
+                                label: 'Delete campaign',
+                                icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                                    path: mdiDeleteOutline.path,
+                                    size: 0.8
+                                }),
+                                destructive: true,
+                                disabled: deleting,
+                                disabledReason: 'This campaign is being deleted',
+                                onClick: ()=>void handleDelete()
+                            }
+                        ]
+                    })
+                ]
+            })
+        },
+        contentGutterX: true,
+        contentGutterY: true,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        sx: {
+                            alignItems: 'center'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Chip, {
+                                size: "small",
+                                label: windowState
+                            }),
+                            listIds.length ? listIds.map((id)=>{
+                                var _names_get;
+                                return /*#__PURE__*/ _jsx(Chip, {
+                                    size: "small",
+                                    variant: "outlined",
+                                    label: (_names_get = names.get(id)) != null ? _names_get : id
+                                }, id);
+                            }) : /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                children: 'No lists assigned — its emails pick their own audience'
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Divider, {}),
+                    /*#__PURE__*/ _jsx(CampaignConversionsSection, {
+                        hostId: hostId,
+                        sendIds: sendIds,
+                        truncated: sendsTruncated,
+                        basePath: basePath
+                    }),
+                    /*#__PURE__*/ _jsx(Divider, {}),
+                    /*#__PURE__*/ _jsx(CampaignRevenueSection, {
+                        hostId: hostId,
+                        sendIds: sendIds,
+                        truncated: sendsTruncated
+                    }),
+                    /*#__PURE__*/ _jsx(Divider, {}),
+                    /*#__PURE__*/ _jsx(CampaignDestinationsSection, {
+                        hostId: hostId,
+                        sendIds: sendIds,
+                        truncated: sendsTruncated
+                    }),
+                    /*#__PURE__*/ _jsx(Divider, {}),
+                    /*#__PURE__*/ _jsx(CampaignMembersSection, {
+                        hostId: hostId,
+                        campaignId: campaignId,
+                        startAtMs: campaign.startAtMs,
+                        endAtMs: campaign.endAtMs
+                    }),
+                    /*#__PURE__*/ _jsx(Divider, {}),
+                    /*#__PURE__*/ _jsx(Section, {
+                        title: "The mail, across this campaign",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 3,
+                            sx: {
+                                flexWrap: 'wrap'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Figure, _extends({
+                                    label: "Addressed"
+                                }, rolled(rollup.addressed))),
+                                /*#__PURE__*/ _jsx(Figure, _extends({
+                                    label: "Sent"
+                                }, rolled(rollup.sent))),
+                                /*#__PURE__*/ _jsx(Figure, _extends({
+                                    label: "Delivered"
+                                }, rolled(rollup.delivered))),
+                                /*#__PURE__*/ _jsx(Figure, _extends({
+                                    label: "Opens"
+                                }, rolled(rollup.opens))),
+                                /*#__PURE__*/ _jsx(Figure, _extends({
+                                    label: "Clicks"
+                                }, rolled(rollup.clicks))),
+                                /*#__PURE__*/ _jsx(Figure, _extends({
+                                    label: "Unsubscribed"
+                                }, rolled(rollup.unsubscribes)))
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        spacing: 0.5,
+                        children: [
+                            /*#__PURE__*/ _jsx(RateRow, {
+                                label: "Open rate",
+                                rate: rollup.openRate
+                            }),
+                            /*#__PURE__*/ _jsx(RateRow, {
+                                label: "Click rate",
+                                rate: rollup.clickRate
+                            }),
+                            /*#__PURE__*/ _jsx(RateRow, {
+                                label: "Unsubscribe rate",
+                                rate: rollup.unsubscribeRate
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Divider, {}),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        sx: {
+                            alignItems: 'center',
+                            justifyContent: 'space-between'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "overline",
+                                color: "text.secondary",
+                                children: `Emails (${sends.length})`
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                variant: composing ? 'text' : 'contained',
+                                onClick: ()=>setComposing((open)=>!open),
+                                children: composing ? 'Close composer' : 'Write an email'
+                            })
+                        ]
+                    }),
+                    sends.length ? /*#__PURE__*/ _jsxs(Stack, {
+                        spacing: 0.5,
+                        children: [
+                            /*#__PURE__*/ _jsx(ListTable, {
+                                "aria-label": "The campaign's emails",
+                                rows: sends,
+                                columns: sendColumns,
+                                rowHeight: TABLE_ROW_HEIGHT,
+                                onOpen: (_id, send)=>{
+                                    const href = sendHref(send);
+                                    if (href) router.push(href);
+                                }
+                            }),
+                            sendsTruncated ? /*#__PURE__*/ _jsx(Alert, {
+                                severity: "info",
+                                children: `Showing ${CAMPAIGN_EMAIL_CEILING} of this campaign's ` + 'emails. It has sent more — the ones listed are not ' + 'necessarily the most recent, because a send carries no ' + 'date field that every writer stamps, and the figures above ' + 'cover the emails listed.'
+                            }) : null
+                        ]
+                    }) : /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: 'No emails in this campaign yet.'
+                    }),
+                    composing ? /*#__PURE__*/ _jsxs(Box, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Divider, {
+                                sx: {
+                                    mb: 2
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(CampaignComposer, {
+                                hostId: hostId,
+                                emailCampaignId: campaignId,
+                                campaignListIds: listIds,
+                                campaignTopicId: campaign.topicId,
+                                onSent: ()=>setComposing(false)
+                            })
+                        ]
+                    }) : null
+                ]
+            }),
+            topicSource,
+            /*#__PURE__*/ _jsx(CampaignEditDrawer, {
+                open: editing,
+                onClose: ()=>setEditing(false),
+                campaign: campaign,
+                lists: (listDocs != null ? listDocs : []).map((list)=>{
+                    var _list_name;
+                    return {
+                        value: String(list.$id),
+                        label: String((_list_name = list.name) != null ? _list_name : list.$id)
+                    };
+                }),
+                topics: topicOptions,
+                busy: saving,
+                error: saveError,
+                onSubmit: (values)=>void handleSave(values)
+            })
+        ]
+    });
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(PageHeaderRecord, {
+                title: campaign.name || campaignId
+            }),
+            card
+        ]
+    });
+}
+CampaignDetailCard.displayName = 'CampaignDetailCard';
+export default CampaignDetailCard;
+
+//# sourceMappingURL=campaign-detail-card.js.map