@aglyn/plugins-marketing 1.0.0-beta.143

package/src/lib/components/email-detail.js

@@ -0,0 +1,1180 @@
+/**
+ * @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 { PageHeaderRecord, pluginDocsHelp } from "@aglyn/aglyn";
+import { mdiCalendarClockOutline, mdiCloseCircleOutline, mdiDeleteOutline, mdiPencilOutline } from "@aglyn/shared-data-mdi";
+import { AppLink, CardDisplay, MdiIcon, useConfirmationContext } from "@aglyn/shared-ui-jsx";
+import RowActionsMenu from "@aglyn/shared-ui-jsx/components/row-actions-menu.component";
+import { ScrollTable } from "@aglyn/shared-ui-jsx/components/scroll-table.component";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { useFirestore, useFirestoreDoc } from "@aglyn/tenant-feature-instance";
+import { Alert, Button, Chip, Divider, Stack, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
+import { doc } from "firebase/firestore";
+import { useRouter } from "next/navigation";
+import { useCallback, useMemo, useState } from "react";
+import { campaignLinkReport, campaignReport } from "@aglyn/shared-ui-email-campaigns/model/campaign-report";
+import { campaignSendDisplay, CAMPAIGN_SEND_CONTAINER_FIELD } from "@aglyn/shared-ui-email-campaigns/model/campaign-container";
+import { emailAudienceLabel, emailIsUnsent, emailSendTimeMs, emailSentAs } from "@aglyn/shared-ui-email-campaigns/model/email-record";
+import { emailPlainTextState } from "@aglyn/aglyn/app-utils/recipient-email-render";
+import { useMarketingHubPath } from "./use-marketing-hub-path.js";
+import { CampaignDesignPreview as EmailDesignPreview } from "./campaign-email-zones.js";
+import EmailEditDrawer from "./email-edit-drawer.js";
+import EmailRecipientsCard from "./email-recipients-card.js";
+import { Figure, percent, RateRow, Section } from "@aglyn/shared-ui-email-campaigns/components/report-figures";
+import { useCampaignManageApi, useCampaignSendApi } from "./use-campaign-send-api.js";
+const previewDocsHelp = pluginDocsHelp('emailCampaigns', {
+    anchor: '#the-campaign-report',
+    excerpt: 'The email as an inbox receives it, drawn by the same renderer the send ' + 'path uses. Merge tokens are left standing — a real send fills them from ' + 'each recipient.'
+});
+const emailDocsHelp = pluginDocsHelp('emailCampaigns', {
+    anchor: '#the-campaign-report',
+    excerpt: 'One email: what it looked like, who it went to, what was delivered, ' + 'and which links were followed — each rate over the population it is ' + 'measured against.'
+});
+/**
+ * ONE MESSAGE: what it looked like, where it went, and what it did.
+ *
+ * ## The template it was built from, drawn as it stands NOW
+ *
+ * The preview renders the template's CURRENT version, because the HTML that
+ * was actually mailed is not stored — it is rendered per recipient at send
+ * time, with that recipient's merge values in it, and keeping a copy per
+ * message would be a copy of the whole email per address. So a message sent
+ * before its template was last edited previews as the template is today, and
+ * the frame says so rather than letting a reader take it for a record of what
+ * went out.
+ *
+ * ## Every rate names its denominator
+ *
+ * The arithmetic is `campaign-report.ts` — the same pure module the campaign
+ * report reads — so open rate over `delivered` and click rate over `delivered`
+ * are computed once, carry their own denominator labels, and come back `null`
+ * rather than 0% when they cannot honestly be taken. Nothing on this screen
+ * divides anything.
+ *
+ * ## What this page reads
+ *
+ * Four documents: the message, its link rollup, the template screen and the
+ * template's version. None of them grows with the size of the send. The
+ * recipient list is the one read that does, and it is its own card with its
+ * own request.
+ */ export function EmailDetail(props) {
+    var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6, _sentAs_fromName, _sentAs_replyTo, _ref7, _ref8;
+    const { hostId, emailId, basePath } = props;
+    // The sibling hub: a campaign's page belongs to the Marketing console.
+    const marketingHub = useMarketingHubPath();
+    const firestore = useFirestore();
+    const { data: email, status } = useFirestoreDoc(()=>doc(firestore, 'hosts', hostId, 'campaigns', emailId), [
+        firestore,
+        hostId,
+        emailId
+    ]);
+    const notFound = status !== 'loading' && !email;
+    /*
+   * The link rollup, its own document rather than a field on the message.
+   *
+   * A map of destinations grows with the content, and the message document is
+   * read by the list, the glance widget and the send path; putting an
+   * unbounded map on it would make every one of those reads larger.
+   */ const { data: links } = useFirestoreDoc(()=>doc(firestore, 'hosts', hostId, 'campaigns', emailId, 'reports', 'links'), [
+        firestore,
+        hostId,
+        emailId
+    ]);
+    const templateScreenId = email == null ? void 0 : email.templateScreenId;
+    const { data: template } = useFirestoreDoc(()=>templateScreenId ? doc(firestore, 'hosts', hostId, 'screens', templateScreenId) : null, [
+        firestore,
+        hostId,
+        templateScreenId
+    ]);
+    const templateVersionId = template == null ? void 0 : template.versionId;
+    const { data: templateVersion } = useFirestoreDoc(()=>templateScreenId && templateVersionId ? doc(firestore, 'hosts', hostId, 'screens', templateScreenId, 'versions', templateVersionId) : null, [
+        firestore,
+        hostId,
+        templateScreenId,
+        templateVersionId
+    ]);
+    /**
+   * A hand-written plain-text version that no longer describes the design.
+   *
+   * Said HERE and not only in the composer, because an email can be scheduled
+   * and then have its design edited — after which nobody opens the composer
+   * again, and the send goes out with a styled half and a text half that
+   * disagree. This page is where somebody looks at a scheduled email, so it is
+   * where the fact has to be readable.
+   *
+   * Only while the email is unsent. On a sent one the text part that went out
+   * is history; the design moving afterwards is expected and is what the
+   * preview's own note already says.
+   */ const plainTextState = emailPlainTextState({
+        plainText: String((_ref = email == null ? void 0 : email.plainText) != null ? _ref : ''),
+        plainTextVersionId: String((_ref1 = email == null ? void 0 : email.plainTextVersionId) != null ? _ref1 : '')
+    }, template == null ? void 0 : template.versionId);
+    const report = useMemo(()=>campaignReport(email == null ? void 0 : email.stats), [
+        email
+    ]);
+    const linkReport = useMemo(()=>campaignLinkReport(links), [
+        links
+    ]);
+    const subject = String((email == null ? void 0 : email.subject) || 'Untitled email');
+    /*
+   * The composed body, kept on the send document. A message written without
+   * a template still has a rendered HTML part in the inbox, so this is what
+   * the preview draws for one.
+   */ const composedBody = String((_ref2 = email == null ? void 0 : email.body) != null ? _ref2 : '');
+    const sendTimeMs = email ? emailSendTimeMs(email) : 0;
+    const state = String((_ref3 = email == null ? void 0 : email.status) != null ? _ref3 : '');
+    /** What this email is doing, which the stored status alone cannot say. */ const display = campaignSendDisplay(email);
+    /**
+   * Part way through an audience larger than one batch.
+   *
+   * Stored as `scheduled` — the state the processor claims to resume it — so
+   * every control below that keyed on `scheduled` alone was offering an
+   * action about an email that is already going out.
+   */ const midFlight = display.state === 'sending';
+    /**
+   * This email has not gone to anybody yet.
+   *
+   * Everything below the state table is a REPORT, and an unsent email has
+   * nothing to report — no `stats` at all. Drawing the figures anyway would
+   * fill the page with zeros and a delivery rate of 0%, which is the reading
+   * "this reached nobody" rather than "this has not been sent", and those are
+   * different facts about an email.
+   */ const unsent = emailIsUnsent(email);
+    /** The merchant's own name for this email, where one was given. */ const displayName = String((_ref4 = email == null ? void 0 : email.displayName) != null ? _ref4 : '');
+    /**
+   * How many times this email has been sent, and when the last one was.
+   *
+   * A message written before an email could be sent twice carries neither, and
+   * one send is what an absent count means — not zero.
+   */ const sendCount = Number((_ref5 = email == null ? void 0 : email.sendCount) != null ? _ref5 : 1) || 1;
+    const lastSentMs = (email == null ? void 0 : email.lastSentAt) ? emailSendTimeMs({
+        sentAt: email.lastSentAt
+    }) : 0;
+    /**
+   * The sender this message actually left with, as the SEND recorded it.
+   *
+   * Read, never composed. The site's sending identity is a setting: a
+   * merchant who verifies a new domain in November has not changed what went
+   * out in March, and resolving the identity here would answer "what would
+   * this send as today" on a page whose whole subject is a message that
+   * already went. Exactly the rule the list name beside it follows.
+   */ const sentAs = emailSentAs(email);
+    /*
+   * The campaign this message belongs to.
+   *
+   * `emailCampaignId` — {@link CAMPAIGN_SEND_CONTAINER_FIELD} — is the one
+   * linkage, and it is deliberately not spelled `campaignId`: on a message
+   * document that name already means the message's OWN id, which is what the
+   * report route addresses and what every delivered unsubscribe footer
+   * carries as `cid=`.
+   *
+   * The fallback is the migration. A message written before campaigns grouped
+   * anything names no container, and its own id IS the campaign the URL
+   * resolves — the campaign detail route answers an id it does not recognize
+   * as a container with that message's own report.
+   */ const campaignId = String((_ref6 = email == null ? void 0 : email[CAMPAIGN_SEND_CONTAINER_FIELD]) != null ? _ref6 : emailId);
+    /*==========================================
+   * SENDING THIS EMAIL TO MORE PEOPLE.
+   *
+   * The whole control is a confirmation and one POST. Every decision it looks
+   * like it is making — who is left, who is suppressed, whether there is
+   * allowance and hourly room — is made by the send path, which is also the
+   * path the original send took; asking any of it here would be a second set
+   * of rules to disagree with the first.
+   *
+   * Two requests rather than one, and the first is a READ. `dryRun` runs the
+   * whole resolution and writes nothing, so the confirmation can say how many
+   * people this would reach before the merchant agrees to it. A send is the
+   * one action on this page that cannot be taken back, and "Send to more
+   * recipients?" with no number in it is a button nobody can answer honestly.
+   *=========================================*/ const campaignSendApi = useCampaignSendApi(hostId);
+    const { confirm } = useConfirmationContext();
+    const { enqueueSnackbar } = useSnackbar();
+    const [sendingMore, setSendingMore] = useState(false);
+    const handleSendToMore = useCallback(async ()=>{
+        if (sendingMore) return;
+        setSendingMore(true);
+        try {
+            var _ref, _ref1, _ref2;
+            var _counted_payload, _counted_payload1, _result_payload;
+            const counted = await campaignSendApi({
+                action: 'followUp',
+                campaignId: emailId,
+                dryRun: true
+            });
+            if (!counted.response.ok) {
+                var _ref3;
+                var _counted_payload2;
+                return void enqueueSnackbar((_ref3 = (_counted_payload2 = counted.payload) == null ? void 0 : _counted_payload2.error) != null ? _ref3 : 'This email cannot be sent again', {
+                    variant: 'warning',
+                    allowDuplicate: true
+                });
+            }
+            const reaching = Number((_ref = (_counted_payload = counted.payload) == null ? void 0 : _counted_payload.sendable) != null ? _ref : 0);
+            const already = Number((_ref1 = (_counted_payload1 = counted.payload) == null ? void 0 : _counted_payload1.alreadyReached) != null ? _ref1 : 0);
+            if (!reaching) {
+                return void enqueueSnackbar('Everyone in this audience already has this email', {
+                    variant: 'info',
+                    persist: false
+                });
+            }
+            const agreed = await confirm({
+                title: 'Send this email to more people?',
+                description: `This sends the same email to ${reaching.toLocaleString()} more ` + `${reaching === 1 ? 'person' : 'people'} in the same audience. ` + `The ${already.toLocaleString()} who already received it are not ` + 'sent it again, and its report adds the new figures to the ones ' + 'it already holds.',
+                confirmationText: 'Send'
+            }).then(()=>true).catch(()=>false);
+            if (!agreed) return;
+            const result = await campaignSendApi({
+                action: 'followUp',
+                campaignId: emailId
+            });
+            if (!result.response.ok) {
+                var _ref4;
+                var _result_payload1;
+                return void enqueueSnackbar((_ref4 = (_result_payload1 = result.payload) == null ? void 0 : _result_payload1.error) != null ? _ref4 : 'Send failed', {
+                    variant: 'warning',
+                    allowDuplicate: true
+                });
+            }
+            enqueueSnackbar(`Sent to ${Number((_ref2 = (_result_payload = result.payload) == null ? void 0 : _result_payload.sent) != null ? _ref2 : 0).toLocaleString()} more ` + 'recipients', {
+                variant: 'success',
+                persist: false
+            });
+        } catch (error) {
+            console.error(error);
+            enqueueSnackbar('Send failed', {
+                variant: 'error',
+                allowDuplicate: true
+            });
+        } finally{
+            setSendingMore(false);
+        }
+    }, [
+        campaignSendApi,
+        confirm,
+        emailId,
+        enqueueSnackbar,
+        sendingMore
+    ]);
+    /*==========================================
+   * THE LIFECYCLE ACTIONS.
+   *
+   * Every one of them is one POST to the same route the composer and the
+   * scheduled processor use. None of them decides anything: whether an email
+   * may be sent now, rescheduled or canceled is decided by the route against
+   * the record's stored `status`, so the rules live in one place and the
+   * header's job is only to offer the ones that apply.
+   *
+   * The copy is deliberately NOT sent with any of them. `sendNow` reads the
+   * whole message off the record — a request that could also carry a subject
+   * and a body would be a way to put arbitrary copy on an existing send id
+   * and mail it under that id's unsubscribe scope.
+   *=========================================*/ const [busy, setBusy] = useState('');
+    const [editing, setEditing] = useState(null);
+    /** One POST, one snackbar, one busy flag — the shape all four share. */ const runAction = useCallback(async (key, request, success, failure)=>{
+        if (busy) return false;
+        setBusy(key);
+        try {
+            const { response, payload } = await campaignSendApi(_extends({
+                campaignId: emailId
+            }, request));
+            if (!response.ok) {
+                var _ref;
+                enqueueSnackbar((_ref = payload == null ? void 0 : payload.error) != null ? _ref : failure, {
+                    variant: 'warning',
+                    allowDuplicate: true
+                });
+                return false;
+            }
+            enqueueSnackbar(success(payload), {
+                variant: 'success',
+                persist: false
+            });
+            return true;
+        } catch (error) {
+            console.error(error);
+            enqueueSnackbar(failure, {
+                variant: 'error',
+                allowDuplicate: true
+            });
+            return false;
+        } finally{
+            setBusy('');
+        }
+    }, [
+        busy,
+        campaignSendApi,
+        emailId,
+        enqueueSnackbar
+    ]);
+    const handleSendNow = useCallback(async ()=>{
+        /*
+     * Counted before it is offered, the same two-request shape the follow-up
+     * uses: `dryRun` runs the whole resolution and writes nothing, so the
+     * confirmation can name how many people this reaches. "Send this now?"
+     * with no number in it is a question nobody can answer honestly, and this
+     * is the action on the page that cannot be taken back.
+     */ if (busy) return;
+        setBusy('sendNow');
+        /*
+     * `null` for "the count did not happen", which is not the same answer as
+     * zero — zero is a real reach that the confirmation would go on to
+     * describe, and the failure branches below return rather than reaching it.
+     */ let reaching = null;
+        try {
+            const counted = await campaignSendApi({
+                action: 'sendNow',
+                campaignId: emailId,
+                dryRun: true
+            });
+            if (counted.response.ok) {
+                var _ref, _ref1;
+                var _counted_payload, _counted_payload1;
+                reaching = Number((_ref = (_ref1 = (_counted_payload = counted.payload) == null ? void 0 : _counted_payload.sendable) != null ? _ref1 : (_counted_payload1 = counted.payload) == null ? void 0 : _counted_payload1.sent) != null ? _ref : 0);
+            } else {
+                var _ref2;
+                var _counted_payload2;
+                enqueueSnackbar((_ref2 = (_counted_payload2 = counted.payload) == null ? void 0 : _counted_payload2.error) != null ? _ref2 : 'This email cannot be sent', {
+                    variant: 'warning',
+                    allowDuplicate: true
+                });
+            }
+        } catch (error) {
+            console.error(error);
+            enqueueSnackbar('Send failed', {
+                variant: 'error',
+                allowDuplicate: true
+            });
+        }
+        setBusy('');
+        if (reaching === null) return;
+        const agreed = await confirm({
+            title: 'Send this email now?',
+            description: `This sends it to ${reaching.toLocaleString()} ` + `${reaching === 1 ? 'person' : 'people'} straight away` + (state === 'scheduled' ? ', instead of at the time it is scheduled for. ' : '. ') + 'It cannot be taken back once it goes.',
+            confirmationText: 'Send now'
+        }).then(()=>true).catch(()=>false);
+        if (!agreed) return;
+        await runAction('sendNow', {
+            action: 'sendNow'
+        }, (payload)=>{
+            var _ref;
+            return `Sent to ${Number((_ref = payload == null ? void 0 : payload.sent) != null ? _ref : 0).toLocaleString()} recipients`;
+        }, 'Send failed');
+    }, [
+        busy,
+        campaignSendApi,
+        confirm,
+        emailId,
+        enqueueSnackbar,
+        runAction,
+        state
+    ]);
+    /*==========================================
+   * STOPPING A SEND, WHICH NOW MEANS TWO DIFFERENT THINGS.
+   *
+   * `cancel` acts on `scheduled`, and an email delivering an audience larger
+   * than one batch is stored as `scheduled` between runs — so the control
+   * that withdraws a campaign before it goes also stops one that is half
+   * delivered, with no change to the route. That is a real capability, and a
+   * merchant watching a send go wrong needs to be told which of the two they
+   * are about to do: nothing has been mailed, or two thousand people already
+   * have it and are keeping it.
+   *=========================================*/ const handleCancel = useCallback(async ()=>{
+        const reached = display.progress.reached;
+        const left = display.progress.remaining;
+        const agreed = await confirm({
+            title: midFlight ? 'Stop sending this email?' : 'Cancel this scheduled email?',
+            description: midFlight ? `It has reached ${reached.toLocaleString()} ` + `${reached === 1 ? 'person' : 'people'} so far, and stopping it ` + `leaves ${left.toLocaleString()} unaddressed. What has already ` + 'gone out cannot be taken back — those messages stay in inboxes ' + 'and keep their unsubscribe links. The email and its report are ' + 'kept, but a stopped send cannot be resumed; reaching the rest ' + 'means composing a new email.' : 'It will not be sent at the time it is scheduled for. The email ' + 'and everything written on it are kept, but a canceled email ' + 'cannot be put back on the schedule — you would compose a new one.',
+            confirmationText: midFlight ? 'Stop sending' : 'Cancel send'
+        }).then(()=>true).catch(()=>false);
+        if (!agreed) return;
+        await runAction('cancel', {
+            action: 'cancel'
+        }, ()=>midFlight ? 'This email has stopped sending' : 'This email will not be sent', 'This email could not be canceled');
+    }, [
+        confirm,
+        display.progress,
+        midFlight,
+        runAction
+    ]);
+    const handleReschedule = useCallback(async (values)=>{
+        const done = await runAction('schedule', {
+            action: 'schedule',
+            sendAtMs: values.sendAtMs
+        }, ()=>{
+            var _values_sendAtMs;
+            return `Scheduled for ${new Date(Number((_values_sendAtMs = values.sendAtMs) != null ? _values_sendAtMs : 0)).toLocaleString()}`;
+        }, 'This email could not be scheduled');
+        if (done) setEditing(null);
+    }, [
+        runAction
+    ]);
+    /*==========================================
+   * DISCARDING A DRAFT, WHICH IS THE ONE REMOVAL THIS PAGE HAS.
+   *
+   * Only ever offered on a `draft`, and refused again by the route inside the
+   * transaction that deletes — the state on screen is a snapshot, and
+   * `sendNow` claims a draft by moving it to `sending` in a transaction of
+   * its own, so a check made only here could remove a record the send path
+   * was mailing from.
+   *
+   * A sent email is never discardable from anywhere. Its report is what a
+   * merchant answers a complaint with, and its id is inside the HMAC of every
+   * unsubscribe link it delivered; a scheduled one is withdrawn with Cancel,
+   * which keeps the record and takes it off the clock.
+   *
+   * The reader is sent back to the list afterwards rather than left on the
+   * page of a record that no longer exists — which would render the "could
+   * not be loaded" branch and read as a failure.
+   *=========================================*/ const manageApi = useCampaignManageApi(hostId);
+    const router = useRouter();
+    const handleDiscard = useCallback(async ()=>{
+        const agreed = await confirm({
+            title: 'Discard this draft?',
+            description: 'This email has not been sent to anybody, and discarding it removes ' + 'it for good — the subject, the message and everything else written ' + 'on it. There is no undo.',
+            confirmationText: 'Discard'
+        }).then(()=>true).catch(()=>false);
+        if (!agreed) return;
+        if (busy) return;
+        setBusy('discard');
+        try {
+            const { response, payload } = await manageApi({
+                action: 'discardEmail',
+                campaignId: emailId
+            });
+            if (!response.ok) {
+                var _ref;
+                return void enqueueSnackbar((_ref = payload == null ? void 0 : payload.error) != null ? _ref : 'This draft could not be discarded', {
+                    variant: 'warning',
+                    allowDuplicate: true
+                });
+            }
+            enqueueSnackbar('Draft discarded', {
+                variant: 'success',
+                persist: false
+            });
+            router.push(`${basePath}/messages`);
+        } catch (error) {
+            console.error(error);
+            enqueueSnackbar('This draft could not be discarded', {
+                variant: 'error',
+                allowDuplicate: true
+            });
+        } finally{
+            setBusy('');
+        }
+    }, [
+        basePath,
+        busy,
+        confirm,
+        emailId,
+        enqueueSnackbar,
+        manageApi,
+        router
+    ]);
+    const handleRename = useCallback(async (values)=>{
+        const done = await runAction('update', {
+            action: 'update',
+            displayName: values.displayName
+        }, ()=>'Name updated', 'The name could not be updated');
+        if (done) setEditing(null);
+    }, [
+        runAction
+    ]);
+    /*==========================================
+   * THE HEADER, IN THREE REGISTERS.
+   *
+   * Navigation reads as navigation — a naked link button, because that is
+   * what it is and a reader should be able to tell without clicking. The
+   * PRIMARY action of the state is the one contained button, so there is
+   * exactly one on the page and it is the thing a merchant came to do.
+   * Everything else goes in the overflow, and the two irreversible entries in
+   * there are marked `destructive` so they carry the error color rather than
+   * sitting in the list looking like "Rename".
+   *
+   * `RowActionsMenu` is named for table rows and its rendering is not: it is
+   * a kebab `IconButton` and a `Menu` whose items support `onClick`,
+   * `destructive`, `disabled` and `disabledReason` — exactly what a card
+   * header's overflow needs. Reusing it is what keeps the menu on this page
+   * behaving like every other overflow menu in the console.
+   *=========================================*/ const scheduled = state === 'scheduled';
+    const draft = state === 'draft';
+    const sending = state === 'sending';
+    const overflowItems = [
+        {
+            key: 'rename',
+            label: 'Edit details',
+            icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                path: mdiPencilOutline.path,
+                size: 0.8
+            }),
+            onClick: ()=>setEditing('details')
+        },
+        /*
+      Rescheduling an email that is ALREADY GOING OUT is not a thing to
+      offer: its remaining batches are due when the sender said, and moving
+      `sendAtMs` under the processor mid-campaign changes when the rest of a
+      delivery happens rather than when it starts.
+     */ ...(draft || scheduled) && !midFlight ? [
+            {
+                key: 'schedule',
+                label: scheduled ? 'Reschedule' : 'Schedule',
+                icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiCalendarClockOutline.path,
+                    size: 0.8
+                }),
+                onClick: ()=>setEditing('schedule')
+            }
+        ] : [],
+        ...scheduled && !midFlight ? [
+            {
+                key: 'cancel',
+                label: 'Cancel send',
+                icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiCloseCircleOutline.path,
+                    size: 0.8
+                }),
+                destructive: true,
+                disabled: Boolean(busy),
+                disabledReason: 'Another action on this email is still running',
+                onClick: ()=>void handleCancel()
+            }
+        ] : [],
+        /*
+      Discard is offered ONLY on a draft, and it is hidden rather than
+      disabled everywhere else — the opposite of how this menu treats
+      `Reschedule`, and deliberately.
+
+      A disabled control tells a reader that the action exists for this
+      record and is momentarily unavailable. There is no state in which a
+      sent email becomes discardable, so showing the entry greyed out on one
+      would be an offer this product will never honor, sitting under the
+      report it is promising to destroy.
+     */ ...draft ? [
+            {
+                key: 'discard',
+                label: 'Discard draft',
+                icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiDeleteOutline.path,
+                    size: 0.8
+                }),
+                destructive: true,
+                disabled: Boolean(busy),
+                disabledReason: 'Another action on this email is still running',
+                onClick: ()=>void handleDiscard()
+            }
+        ] : []
+    ];
+    /*
+   * The one contained button, and what it is per state.
+   *
+   * `draft` and `scheduled` share it: the email has not gone out, so the act
+   * is to make it go. A `sent` email's is the follow-up. A `canceled` one has
+   * no primary act at all — it was withdrawn deliberately, and offering a way
+   * to un-withdraw it would be a resurrect path this model does not have —
+   * and neither does one that is mid-send.
+   */ const primaryAction = (draft || scheduled) && !midFlight ? /*#__PURE__*/ _jsx(Button, {
+        size: "small",
+        variant: "contained",
+        disabled: Boolean(busy),
+        onClick: ()=>void handleSendNow(),
+        children: busy === 'sendNow' ? 'Checking…' : 'Send now'
+    }) : midFlight ? /*
+        A CAMPAIGN THAT IS ALREADY GOING OUT HAS ONE ACT: STOPPING IT.
+
+        "Send now" is withheld rather than disabled, and the reason is not
+        cosmetic — `sendNow` re-resolves the WHOLE audience and mails it, with
+        no subtraction of anyone already reached, so pressing it on an email
+        between batches sends a second copy to every person who has had the
+        first. Withholding it leaves exactly one primary action, and it is the
+        one a merchant watching a send go wrong actually wants.
+       */ /*#__PURE__*/ _jsx(Button, {
+        size: "small",
+        variant: "contained",
+        color: "error",
+        disabled: Boolean(busy),
+        onClick: ()=>void handleCancel(),
+        children: 'Stop sending'
+    }) : state === 'sent' ? /*#__PURE__*/ _jsx(Button, {
+        size: "small",
+        variant: "contained",
+        disabled: sendingMore,
+        onClick: ()=>void handleSendToMore(),
+        children: sendingMore ? 'Checking…' : 'Send to more recipients'
+    }) : null;
+    /**
+   * WHERE THIS EMAIL IS WRITTEN, which is no longer this page.
+   *
+   * A page cannot both be "what this email did" and "write this email" — the
+   * first is a report the reader scrolls, the second is a form with one
+   * irreversible button — so the composer is its own route and this is the
+   * link to it. Naked, because navigation should read as navigation; the one
+   * CONTAINED button on this page stays the primary act of the state.
+   *
+   * Offered only while the copy can still be changed. An email part way
+   * through a send is stored as `scheduled`, so `midFlight` is what keeps the
+   * link off a message that is already reaching inboxes — the same distinction
+   * "Send now" is withheld on.
+   */ const editHref = `${basePath}/messages/${emailId}/edit`;
+    const headerActions = /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        sx: {
+            alignItems: 'center'
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Button, _extends({
+                component: AppLink
+            }, {
+                componentVariant: 'naked',
+                nativeButton: false
+            }, {
+                href: `${basePath}/messages`,
+                size: "small",
+                color: "primary",
+                children: 'All messages'
+            })),
+            (draft || scheduled) && !midFlight ? /*#__PURE__*/ _jsx(Button, _extends({
+                component: AppLink
+            }, {
+                componentVariant: 'naked',
+                nativeButton: false
+            }, {
+                href: editHref,
+                size: "small",
+                color: "primary",
+                children: 'Write this email'
+            })) : null,
+            templateScreenId ? /*#__PURE__*/ _jsx(Button, _extends({
+                component: AppLink
+            }, {
+                componentVariant: 'naked',
+                nativeButton: false
+            }, {
+                href: `${basePath}/templates/${templateScreenId}`,
+                size: "small",
+                color: "primary",
+                children: 'Open template'
+            })) : null,
+            primaryAction,
+            /*#__PURE__*/ _jsx(RowActionsMenu, {
+                label: subject,
+                items: overflowItems
+            })
+        ]
+    });
+    if (notFound) {
+        return /*#__PURE__*/ _jsx(CardDisplay, {
+            header: 'Email',
+            help: emailDocsHelp,
+            contentGutterX: true,
+            contentGutterY: true,
+            HeaderProps: {
+                action: headerActions
+            },
+            children: /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'This email could not be loaded. It may have been deleted.'
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 3,
+        children: [
+            /*#__PURE__*/ _jsx(PageHeaderRecord, {
+                title: email ? subject : undefined
+            }),
+            /*#__PURE__*/ _jsx(CardDisplay, {
+                header: 'Email',
+                help: emailDocsHelp,
+                contentGutterX: true,
+                contentGutterY: true,
+                HeaderProps: {
+                    action: headerActions
+                },
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 3,
+                    children: [
+                        report.caveats.map((caveat)=>/*#__PURE__*/ _jsx(Alert, {
+                                severity: "info",
+                                children: caveat.message
+                            }, caveat.id)),
+                        unsent && plainTextState.stale ? /*#__PURE__*/ _jsx(Alert, {
+                            severity: "warning",
+                            children: 'The design has been edited since this email’s plain-text ' + 'version was written, so the two halves may no longer say the ' + 'same thing. Nothing has overwritten what was written — open ' + 'this email to read it, or take the design’s text instead.'
+                        }) : null,
+                        /*#__PURE__*/ _jsx(Divider, {}),
+                        /*#__PURE__*/ _jsxs(Section, {
+                            title: "Where this went",
+                            children: [
+                                /*#__PURE__*/ _jsx(ScrollTable, {
+                                    size: "small",
+                                    children: /*#__PURE__*/ _jsxs(TableBody, {
+                                        children: [
+                                            /*#__PURE__*/ _jsxs(TableRow, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: 'State'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        align: "right",
+                                                        children: /*#__PURE__*/ _jsx(Chip, {
+                                                            size: "small",
+                                                            color: display.state === 'sending' ? 'info' : display.state === 'stopped' ? 'warning' : undefined,
+                                                            label: display.label
+                                                        })
+                                                    })
+                                                ]
+                                            }),
+                                            midFlight ? /*#__PURE__*/ _jsxs(TableRow, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: 'Next batch'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        align: "right",
+                                                        children: `${display.progress.remaining.toLocaleString()} still ` + 'to reach, ' + (display.progress.nextAtMs ? `next run ${new Date(display.progress.nextAtMs).toLocaleString()}` : 'next run due')
+                                                    })
+                                                ]
+                                            }) : null,
+                                            /*#__PURE__*/ _jsxs(TableRow, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: state === 'sent' ? 'Sent' : 'Scheduled for'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        align: "right",
+                                                        children: sendTimeMs ? new Date(sendTimeMs).toLocaleString() : 'not recorded'
+                                                    })
+                                                ]
+                                            }),
+                                            sendCount > 1 ? /*#__PURE__*/ _jsxs(TableRow, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: 'Sends'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        align: "right",
+                                                        children: `${sendCount.toLocaleString()}, most recently ` + (lastSentMs ? new Date(lastSentMs).toLocaleString() : 'not recorded')
+                                                    })
+                                                ]
+                                            }) : null,
+                                            displayName ? /*#__PURE__*/ _jsxs(TableRow, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: 'Name'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        align: "right",
+                                                        children: displayName
+                                                    })
+                                                ]
+                                            }) : null,
+                                            /*#__PURE__*/ _jsxs(TableRow, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: 'Sent as'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        align: "right",
+                                                        children: sentAs.recorded ? /*#__PURE__*/ _jsx(Typography, {
+                                                            variant: "body2",
+                                                            sx: {
+                                                                fontFamily: 'monospace'
+                                                            },
+                                                            children: sentAs.from
+                                                        }) : /*#__PURE__*/ _jsx(Typography, {
+                                                            variant: "body2",
+                                                            color: "text.secondary",
+                                                            children: unsent ? 'not sent yet' : 'not recorded'
+                                                        })
+                                                    })
+                                                ]
+                                            }),
+                                            sentAs.recorded ? /*#__PURE__*/ _jsxs(TableRow, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: 'From name'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        align: "right",
+                                                        children: (_sentAs_fromName = sentAs.fromName) != null ? _sentAs_fromName : /*#__PURE__*/ _jsx(Typography, {
+                                                            variant: "body2",
+                                                            color: "text.secondary",
+                                                            children: 'The address on its own'
+                                                        })
+                                                    })
+                                                ]
+                                            }) : null,
+                                            sentAs.recorded ? /*#__PURE__*/ _jsxs(TableRow, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: 'Reply-to'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        align: "right",
+                                                        children: (_sentAs_replyTo = sentAs.replyTo) != null ? _sentAs_replyTo : /*#__PURE__*/ _jsx(Typography, {
+                                                            variant: "body2",
+                                                            color: "text.secondary",
+                                                            children: 'The sending address'
+                                                        })
+                                                    })
+                                                ]
+                                            }) : null,
+                                            /*#__PURE__*/ _jsxs(TableRow, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: 'Campaign'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        align: "right",
+                                                        children: marketingHub ? /*#__PURE__*/ _jsx(AppLink, {
+                                                            href: `${marketingHub}/campaigns/${campaignId}`,
+                                                            children: 'Open the campaign'
+                                                        }) : 'Open the campaign'
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs(TableRow, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: 'List'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        align: "right",
+                                                        children: emailAudienceLabel(email)
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs(TableRow, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: 'Template'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        align: "right",
+                                                        children: templateScreenId ? /*#__PURE__*/ _jsx(AppLink, {
+                                                            href: `${basePath}/templates/${templateScreenId}`,
+                                                            children: (_ref7 = template == null ? void 0 : template.displayName) != null ? _ref7 : 'Untitled template'
+                                                        }) : /*#__PURE__*/ _jsx(Typography, {
+                                                            variant: "body2",
+                                                            color: "text.secondary",
+                                                            children: 'Written as plain text in the composer'
+                                                        })
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    children: 'The list and the sender are recorded as they were when this ' + 'email was sent, not as this site is configured now.'
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Divider, {}),
+                        unsent ? /*#__PURE__*/ _jsx(Section, {
+                            title: "Delivery",
+                            children: /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                color: "text.secondary",
+                                children: sending ? 'This email is being sent right now. Its figures appear ' + 'here once the send finishes.' : draft ? 'This email has not been sent, so there is nothing to ' + 'report yet. Write this email — the link is in the ' + 'header — then send it or put it on the schedule.' : 'This email has not been sent yet. Its figures appear ' + 'here once it goes out.'
+                            })
+                        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Section, {
+                                    title: "Delivery",
+                                    children: /*#__PURE__*/ _jsxs(Stack, {
+                                        direction: "row",
+                                        spacing: 4,
+                                        useFlexGap: true,
+                                        sx: {
+                                            flexWrap: 'wrap'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Figure, {
+                                                label: "Addressed",
+                                                value: report.recipients,
+                                                note: "after the per-send cap"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Figure, {
+                                                label: "Sent",
+                                                value: report.sent,
+                                                note: "accepted by the provider"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Figure, {
+                                                label: "Delivered",
+                                                value: report.delivered,
+                                                note: "accepted by the receiving server"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Figure, {
+                                                label: "Bounced",
+                                                value: report.bounced,
+                                                note: "of sent"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Figure, {
+                                                label: "Marked as spam",
+                                                value: report.complained,
+                                                note: "of delivered"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Divider, {}),
+                                /*#__PURE__*/ _jsx(Section, {
+                                    title: "Engagement",
+                                    children: /*#__PURE__*/ _jsxs(Stack, {
+                                        direction: "row",
+                                        spacing: 4,
+                                        useFlexGap: true,
+                                        sx: {
+                                            flexWrap: 'wrap'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Figure, {
+                                                label: "Opens",
+                                                value: report.opens,
+                                                note: "every open, repeats included"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Figure, {
+                                                label: "Readers who opened",
+                                                value: report.uniqueOpens,
+                                                note: "distinct recipients"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Figure, {
+                                                label: "Clicks",
+                                                value: report.clicks,
+                                                note: "every click, repeats included"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Figure, {
+                                                label: "Readers who clicked",
+                                                value: report.uniqueClicks,
+                                                note: "distinct recipients"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Figure, {
+                                                label: "Unsubscribed",
+                                                value: report.unsubscribes,
+                                                note: "through this email's link"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Divider, {}),
+                                /*#__PURE__*/ _jsx(Section, {
+                                    title: "Rates",
+                                    children: /*#__PURE__*/ _jsxs(Stack, {
+                                        spacing: 1,
+                                        children: [
+                                            /*#__PURE__*/ _jsx(RateRow, {
+                                                label: "Delivery rate",
+                                                rate: report.rates.delivery
+                                            }),
+                                            /*#__PURE__*/ _jsx(RateRow, {
+                                                label: "Open rate",
+                                                rate: report.rates.open
+                                            }),
+                                            /*#__PURE__*/ _jsx(RateRow, {
+                                                label: "Click rate",
+                                                rate: report.rates.click
+                                            }),
+                                            /*#__PURE__*/ _jsx(RateRow, {
+                                                label: "Click-to-open rate",
+                                                rate: report.rates.clickToOpen
+                                            }),
+                                            /*#__PURE__*/ _jsx(RateRow, {
+                                                label: "Bounce rate",
+                                                rate: report.rates.bounce
+                                            }),
+                                            /*#__PURE__*/ _jsx(RateRow, {
+                                                label: "Complaint rate",
+                                                rate: report.rates.complaint
+                                            }),
+                                            /*#__PURE__*/ _jsx(RateRow, {
+                                                label: "Unsubscribe rate",
+                                                rate: report.rates.unsubscribe
+                                            })
+                                        ]
+                                    })
+                                }),
+                                report.populations.length ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Divider, {}),
+                                        /*#__PURE__*/ _jsxs(Section, {
+                                            title: "Who this was allowed to reach",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Typography, {
+                                                    variant: "body2",
+                                                    color: "text.secondary",
+                                                    children: 'Measured when this email was sent, and stored as it was ' + 'then. These figures describe the send, not the audience ' + 'as it stands today.'
+                                                }),
+                                                /*#__PURE__*/ _jsx(ScrollTable, {
+                                                    size: "small",
+                                                    children: /*#__PURE__*/ _jsx(TableBody, {
+                                                        children: report.populations.map((population)=>/*#__PURE__*/ _jsxs(TableRow, {
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                                        children: population.label
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                                        align: "right",
+                                                                        sx: {
+                                                                            fontWeight: 'bold'
+                                                                        },
+                                                                        children: population.count.toLocaleString()
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                                        align: "right",
+                                                                        children: /*#__PURE__*/ _jsx(Typography, {
+                                                                            variant: "caption",
+                                                                            color: "text.secondary",
+                                                                            children: `of ${population.of.toLocaleString()} ${population.ofLabel}`
+                                                                        })
+                                                                    })
+                                                                ]
+                                                            }, population.id))
+                                                    })
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }) : null,
+                                /*#__PURE__*/ _jsx(Divider, {}),
+                                /*#__PURE__*/ _jsx(Section, {
+                                    title: "Links",
+                                    children: linkReport.rows.length ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                        children: [
+                                            /*#__PURE__*/ _jsxs(ScrollTable, {
+                                                size: "small",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(TableHead, {
+                                                        children: /*#__PURE__*/ _jsxs(TableRow, {
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                                    children: 'Destination'
+                                                                }),
+                                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                                    align: "right",
+                                                                    children: 'Clicks'
+                                                                }),
+                                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                                    align: "right",
+                                                                    children: 'Share'
+                                                                })
+                                                            ]
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableBody, {
+                                                        children: linkReport.rows.map((row)=>/*#__PURE__*/ _jsxs(TableRow, {
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                                        sx: {
+                                                                            wordBreak: 'break-all'
+                                                                        },
+                                                                        children: row.url
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                                        align: "right",
+                                                                        sx: {
+                                                                            fontWeight: 'bold'
+                                                                        },
+                                                                        children: row.clicks.toLocaleString()
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                                        align: "right",
+                                                                        children: row.share ? `${percent(row.share.value)} of ${row.share.denominator.toLocaleString()} ${row.share.denominatorLabel}` : '—'
+                                                                    })
+                                                                ]
+                                                            }, row.url))
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                color: "text.secondary",
+                                                children: 'Counted by address and path — query strings are dropped, ' + 'so two links to the same page with different tracking ' + 'parameters count as one row.'
+                                            }),
+                                            linkReport.unattributedClicks ? /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                color: "text.secondary",
+                                                children: `${linkReport.unattributedClicks.toLocaleString()} clicks ` + 'arrived without a destination and are not in this table.'
+                                            }) : null,
+                                            linkReport.overflowClicks ? /*#__PURE__*/ _jsx(Alert, {
+                                                severity: "info",
+                                                children: 'This email has more distinct destinations than the ' + `rollup keeps. ${linkReport.overflowClicks.toLocaleString()} ` + 'clicks landed on links past that limit and are counted ' + 'in the click total above but not in this table.'
+                                            }) : null
+                                        ]
+                                    }) : /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "body2",
+                                        color: "text.secondary",
+                                        children: report.clicks ? 'Clicks were recorded for this email, but none of them ' + 'carried a destination, so there is nothing to break down ' + 'by link.' : 'No link clicks have been recorded for this email.'
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(EmailRecipientsCard, {
+                hostId: hostId,
+                emailId: emailId
+            }),
+            /*#__PURE__*/ _jsx(CardDisplay, {
+                header: 'Preview',
+                help: previewDocsHelp,
+                contentGutterX: true,
+                contentGutterY: true,
+                children: templateScreenId ? /*#__PURE__*/ _jsx(EmailDesignPreview, {
+                    hostId: hostId,
+                    nodes: templateVersion == null ? void 0 : templateVersion.nodes,
+                    loading: template === undefined || templateVersion === undefined,
+                    subject: subject,
+                    preheader: String((_ref8 = template == null ? void 0 : template.emailPreheader) != null ? _ref8 : ''),
+                    emptyMessage: 'The template this email was built from is empty or has ' + 'been deleted, so there is nothing to draw.',
+                    note: 'The template as it stands today. The mail itself is ' + 'rendered per recipient at send time and not kept, so a ' + 'template edited since this went out previews as it is now.'
+                }) : /*#__PURE__*/ _jsx(EmailDesignPreview, {
+                    hostId: hostId,
+                    nodes: undefined,
+                    text: composedBody,
+                    loading: email === undefined,
+                    subject: subject,
+                    emptyMessage: 'This email carries no body, so there is nothing to draw.',
+                    note: 'Written as plain text in the composer. Merge tokens are ' + 'left standing here — the mail itself resolves them per ' + 'recipient at send time and is not kept.'
+                })
+            }),
+            /*#__PURE__*/ _jsx(EmailEditDrawer, {
+                open: editing !== null,
+                onClose: ()=>setEditing(null),
+                field: editing === 'schedule' ? 'schedule' : 'details',
+                title: editing === 'schedule' ? scheduled ? 'Reschedule this email' : 'Schedule this email' : 'Edit details',
+                submitLabel: editing === 'schedule' ? scheduled ? 'Reschedule' : 'Schedule' : 'Save',
+                displayName: displayName,
+                sendAtMs: scheduled ? sendTimeMs : 0,
+                busy: Boolean(busy),
+                note: editing === 'schedule' ? 'The email goes out at this time. You can send it sooner, or ' + 'cancel it, from this page.' : unsent ? 'The name is for finding this email in your own lists. The ' + 'subject and the message are written on this email’s own ' + 'compose page.' : 'This email has been sent, so its subject, message and ' + 'audience describe mail that is already in inboxes and can ' + 'no longer be changed. Its name is yours and stays editable.',
+                onSubmit: (values)=>void (editing === 'schedule' ? handleReschedule(values) : handleRename(values))
+            })
+        ]
+    });
+}
+EmailDetail.displayName = 'EmailDetail';
+export default EmailDetail;
+
+//# sourceMappingURL=email-detail.js.map