@aglyn/plugins-email 1.0.0-beta.143

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

@@ -0,0 +1,681 @@
+/**
+ * @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 { buildRoute, PageHeaderRecord, pluginDocsHelp, Route } from "@aglyn/aglyn";
+import { ICON_VARIANT_BESIGNER } from "@aglyn/shared-data-enums";
+import { mdiBullhornOutline, mdiEyeOutline } from "@aglyn/shared-data-mdi";
+import { AppLink, CardDisplay, MdiIcon } 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 { useConsoleHostRoute, useFirestore, useFirestoreCollection, useFirestoreDoc } from "@aglyn/tenant-feature-instance";
+import { Alert, Button, Chip, Divider, Stack, TableBody, TableCell, TableHead, TableRow, TextField, Typography } from "@mui/material";
+import { collection, doc, documentId, limit, orderBy, query, updateDoc, where } from "firebase/firestore";
+import { useRouter } from "next/navigation";
+import { Suspense, useMemo, useState } from "react";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { CAMPAIGN_SEND_CONTAINER_FIELD } from "@aglyn/shared-ui-email-campaigns/model/campaign-container";
+import { emailSendTimeMs } from "@aglyn/shared-ui-email-campaigns/model/email-record";
+import { campaignSendDisplay } from "@aglyn/shared-ui-email-campaigns/model/campaign-container";
+import { templateProvenance } from "../model/template-provenance.js";
+import { templateReport } from "../model/template-report.js";
+import EmailDesignPreview from "./email-design-preview.js";
+import { EMAIL_TEMPLATE_RECIPIENTS_ZONE } from "./email-zones.js";
+import { Figure, RateRow, Section } from "@aglyn/shared-ui-email-campaigns/components/report-figures";
+import { useConsoleWidgetSlot } from "@aglyn/aglyn/app-utils/console-widget-slot-context";
+import { pluginRecordHref } from "@aglyn/aglyn/plugin-manager/plugin-record-routes";
+/**
+ * How many of a template's messages one read covers.
+ *
+ * A CEILING on the read, not a page size: the report is a single figure per
+ * quantity, so there is nothing to page through. Past it every total is a
+ * floor and the report says so — the same treatment `audienceSizeTruncated`
+ * gets, and for the same reason.
+ */ export const TEMPLATE_CAMPAIGN_CEILING = 100;
+const previewDocsHelp = pluginDocsHelp('designedEmails', {
+    anchor: '#send-it',
+    excerpt: 'The template 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 templateDocsHelp = pluginDocsHelp('designedEmails', {
+    anchor: '#send-it',
+    excerpt: 'One email template: what it looks like, every message sent from it, ' + 'and what those messages did — each rate over the population it was ' + 'measured against.'
+});
+/**
+ * ONE EMAIL TEMPLATE: what it looks like, and what it has done.
+ *
+ * ## What was missing
+ *
+ * A template had a row in a list and no page. The only way to see one was to
+ * open the besigner, which is the editor — it draws canvas nodes in a
+ * browser, not the HTML an inbox receives — and the only way to see how it
+ * performed was to find each message sent from it and read those reports one
+ * at a time. A template used by six messages had its engagement in six places
+ * and nowhere.
+ *
+ * ## Not necessarily this org's template
+ *
+ * A template can be installed from a marketplace listing, in which case its
+ * content is versioned by somebody else and can be withdrawn. Provenance and
+ * standing are read off the document itself — see `template-provenance.ts` —
+ * so this page costs no marketplace read and still never presents an
+ * installed template as locally authored.
+ *
+ * ## What this page reads
+ *
+ * The screen document, its published version, and the messages naming this
+ * template — bounded at {@link TEMPLATE_CAMPAIGN_CEILING}. The recipients
+ * table is its own card and its own request, so a reader who came for the
+ * preview does not pay for the delivery-log query.
+ */ export function EmailTemplateDetail(props) {
+    var _ref, _ref1, _ref2, _ref3;
+    const { hostId, screenId, basePath } = props;
+    const { orgSlug, subdomain } = useConsoleHostRoute(hostId);
+    /*
+   * A campaign's page is another plugin's, so its address is asked for: the
+   * owner publishes where a `campaign` is read and this page links there.
+   * Null where nobody does, or before the console's URL has resolved.
+   */ const campaignHref = (campaignId)=>orgSlug && subdomain ? pluginRecordHref('campaign', {
+            orgSlug,
+            host: subdomain
+        }, campaignId) : null;
+    const RecipientsZone = useConsoleWidgetSlot();
+    const firestore = useFirestore();
+    const router = useRouter();
+    const { enqueueSnackbar } = useSnackbar();
+    /*==========================================
+   * RENAMING THE DESIGN, on its own page.
+   *
+   * The name is the only thing that tells one design from another in the
+   * campaign composer's picker, and until now nothing could change it — so a
+   * site accumulated indistinguishable "Untitled email" rows. Edit lives
+   * here, on the record's detail page, like every other record edit.
+   *
+   * `null` means "not editing": the field shows the live document's name
+   * until the reader types, so an untouched field never writes a stale seed
+   * back — only a value the reader actually entered is ever saved, and only
+   * the one field.
+   *=========================================*/ const [nameDraft, setNameDraft] = useState(null);
+    const [renaming, setRenaming] = useState(false);
+    const handleRename = async ()=>{
+        const next = (nameDraft != null ? nameDraft : '').trim();
+        if (!next || renaming) return;
+        setRenaming(true);
+        try {
+            await updateDoc(doc(firestore, 'hosts', hostId, 'screens', screenId), {
+                displayName: next
+            });
+            setNameDraft(null);
+            enqueueSnackbar('Design renamed', {
+                variant: 'success',
+                persist: false
+            });
+        } catch (error) {
+            console.error(error);
+            enqueueSnackbar('The design could not be renamed', {
+                variant: 'error'
+            });
+        } finally{
+            setRenaming(false);
+        }
+    };
+    const { data: screen, status } = useFirestoreDoc(()=>doc(firestore, 'hosts', hostId, 'screens', screenId), [
+        firestore,
+        hostId,
+        screenId
+    ], {
+        idField: '$id'
+    });
+    // Three states, not two: a document still loading and one that does not
+    // exist both arrive as `undefined`, and rendering an empty report for the
+    // second is how a mistyped id reads as a template nobody ever sent.
+    const notFound = status !== 'loading' && !screen;
+    const versionId = screen == null ? void 0 : screen.versionId;
+    const { data: version } = useFirestoreDoc(()=>versionId ? doc(firestore, 'hosts', hostId, 'screens', screenId, 'versions', versionId) : null, [
+        firestore,
+        hostId,
+        screenId,
+        versionId
+    ]);
+    /*
+   * The messages sent from this template, ordered by DOCUMENT ID.
+   *
+   * Not by date, and that is forced rather than chosen: a sent message
+   * carries `sentAt`, a scheduled one carries `sendAtMs`, and no writer
+   * stamps a `createdAt` — so `orderBy` on either would not mis-sort this
+   * list, it would DROP every message written by the other branch. Ordering
+   * on the document id is the one ordering every message satisfies, it needs
+   * no composite index beside the equality filter, and the rows are sorted by
+   * date below over a window this component already holds.
+   *
+   * One MORE than the ceiling, so truncation is a fact rather than a guess.
+   */ const { data: messageDocs } = useFirestoreCollection(()=>query(collection(firestore, 'hosts', hostId, 'campaigns'), where('templateScreenId', '==', screenId), orderBy(documentId()), limit(TEMPLATE_CAMPAIGN_CEILING + 1)), [
+        firestore,
+        hostId,
+        screenId
+    ], {
+        idField: '$id'
+    });
+    const truncated = ((_ref = messageDocs == null ? void 0 : messageDocs.length) != null ? _ref : 0) > TEMPLATE_CAMPAIGN_CEILING;
+    const messages = useMemo(()=>(messageDocs != null ? messageDocs : []).slice(0, TEMPLATE_CAMPAIGN_CEILING).map((message)=>{
+            var _message_status, _message_status1, _message_audience;
+            return _extends({
+                campaignId: String(message.$id),
+                subject: String(message.subject || 'Untitled email'),
+                /*
+           * A message that has not gone out has NO send time, and that is
+           * what `null` means here — not "unknown". The report measures
+           * engagement over sent messages only, so a scheduled one
+           * contributes to the list below and to no figure above it.
+           */ sentAtMs: String((_message_status = message.status) != null ? _message_status : '') === 'sent' ? emailSendTimeMs(message) || null : null,
+                status: String((_message_status1 = message.status) != null ? _message_status1 : 'sent'),
+                audience: String((_message_audience = message.audience) != null ? _message_audience : '')
+            }, message.listId ? {
+                listId: String(message.listId)
+            } : {}, message.listName ? {
+                listName: String(message.listName)
+            } : {}, {
+                stats: message.stats,
+                scheduledForMs: emailSendTimeMs(message)
+            }, message[CAMPAIGN_SEND_CONTAINER_FIELD] ? {
+                emailCampaignId: String(message[CAMPAIGN_SEND_CONTAINER_FIELD])
+            } : {});
+        }), [
+        messageDocs
+    ]);
+    const orderedMessages = useMemo(()=>[
+            ...messages
+        ].sort((a, b)=>b.scheduledForMs - a.scheduledForMs), [
+        messages
+    ]);
+    const report = useMemo(()=>templateReport(messages, truncated), [
+        messages,
+        truncated
+    ]);
+    const provenance = useMemo(()=>templateProvenance(screen), [
+        screen
+    ]);
+    const messageHref = (message)=>`${basePath}/messages/${message.campaignId}`;
+    /**
+   * What one message sent from this template can be opened into.
+   *
+   * Its own report, and the campaign that grouped it. The template is the page
+   * the reader is standing on, so it is not offered a third time. A message
+   * sent before campaigns existed belongs to no container, and the item says
+   * so rather than vanishing.
+   */ const messageActions = (message)=>[
+            {
+                key: 'details',
+                label: 'Open report',
+                icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiEyeOutline.path,
+                    size: 0.8
+                }),
+                href: messageHref(message)
+            },
+            {
+                key: 'campaign',
+                label: 'Open its campaign',
+                icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiBullhornOutline.path,
+                    size: 0.8
+                }),
+                // The one href here that is not under this surface's own base path.
+                href: message.emailCampaignId && campaignHref(message.emailCampaignId) || undefined,
+                disabled: !message.emailCampaignId || !campaignHref(message.emailCampaignId),
+                disabledReason: message.emailCampaignId ? 'This site’s console URL has not resolved yet' : 'Sent before campaigns grouped their emails, so it belongs to none'
+            }
+        ];
+    const listUrl = `${basePath}/templates`;
+    const besignerUrl = orgSlug && subdomain && versionId ? buildRoute(Route.SCREEN_BESIGNER, {
+        orgSlug,
+        host: subdomain,
+        screenId,
+        versionId
+    }) : '';
+    /*
+   * The header's actions: the way back, and the way in.
+   *
+   * The same pair the screen, component, template and layout detail pages
+   * carry — a link to the listing and a contained button into the besigner
+   * wearing the besigner icon. It hangs off `CardDisplay`'s header rather
+   * than the page header because Emails is a surface with a SECTION RAIL: an
+   * action beside the page title would read as the whole surface's, and this
+   * one belongs to the template the section is showing. The rule is the
+   * console's own — page header where there are no sections, section card
+   * header where there are — and it is why the Forms detail surface, which
+   * has no rail, publishes its besigner button upward instead.
+   */ const headerActions = /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        sx: {
+            alignItems: 'center'
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Button, _extends({
+                component: AppLink
+            }, {
+                componentVariant: 'naked',
+                nativeButton: false
+            }, {
+                href: listUrl,
+                size: "small",
+                color: "primary",
+                children: 'All templates'
+            })),
+            besignerUrl ? /*#__PURE__*/ _jsx(Button, _extends({
+                component: AppLink
+            }, {
+                componentVariant: 'naked',
+                nativeButton: false
+            }, {
+                href: besignerUrl,
+                size: "small",
+                variant: "contained",
+                startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    color: "inherit",
+                    path: ICON_VARIANT_BESIGNER.path
+                }),
+                children: 'Edit in besigner'
+            })) : /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                variant: "contained",
+                disabled: true,
+                startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    color: "inherit",
+                    path: ICON_VARIANT_BESIGNER.path
+                }),
+                children: 'Edit in besigner'
+            })
+        ]
+    });
+    if (notFound) {
+        return /*#__PURE__*/ _jsx(CardDisplay, {
+            header: 'Email template',
+            help: templateDocsHelp,
+            contentGutterX: true,
+            contentGutterY: true,
+            HeaderProps: {
+                action: headerActions
+            },
+            children: /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'This template could not be loaded. It may have been deleted.'
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 3,
+        children: [
+            /*#__PURE__*/ _jsx(PageHeaderRecord, {
+                title: screen ? screen.displayName || screenId : undefined
+            }),
+            /*#__PURE__*/ _jsx(CardDisplay, {
+                header: 'Email template',
+                help: templateDocsHelp,
+                contentGutterX: true,
+                contentGutterY: true,
+                HeaderProps: {
+                    action: headerActions
+                },
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 3,
+                    children: [
+                        provenance.note ? /*#__PURE__*/ _jsx(Alert, {
+                            severity: provenance.warn ? 'warning' : 'info',
+                            children: provenance.note
+                        }) : null,
+                        report.caveats.map((caveat)=>/*#__PURE__*/ _jsx(Alert, {
+                                severity: "info",
+                                children: caveat.message
+                            }, caveat.id)),
+                        /*#__PURE__*/ _jsx(Section, {
+                            title: "Name",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                sx: {
+                                    alignItems: 'flex-start'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Design name",
+                                        size: "small",
+                                        value: nameDraft != null ? nameDraft : String((_ref1 = screen == null ? void 0 : screen.displayName) != null ? _ref1 : ''),
+                                        onChange: (event)=>setNameDraft(event.target.value),
+                                        sx: {
+                                            minWidth: 280
+                                        },
+                                        helperText: "What the campaign composer's design picker shows"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        size: "small",
+                                        disabled: nameDraft === null || !nameDraft.trim() || renaming,
+                                        onClick: ()=>void handleRename(),
+                                        children: renaming ? 'Saving…' : 'Rename'
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Divider, {}),
+                        /*#__PURE__*/ _jsx(Section, {
+                            title: "Delivery",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                spacing: 4,
+                                useFlexGap: true,
+                                sx: {
+                                    flexWrap: 'wrap'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(Figure, {
+                                        label: "Emails",
+                                        value: report.sentCampaigns,
+                                        note: "sent from this template"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Figure, {
+                                        label: "Addressed",
+                                        value: report.recipients,
+                                        note: "after each send's 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 these emails' links"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__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
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Divider, {}),
+                        /*#__PURE__*/ _jsx(Section, {
+                            title: "Who this went to",
+                            children: report.audiences.length ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsxs(ScrollTable, {
+                                        size: "small",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TableHead, {
+                                                children: /*#__PURE__*/ _jsxs(TableRow, {
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: 'Audience'
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            align: "right",
+                                                            children: 'Emails'
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            align: "right",
+                                                            children: 'Addressed'
+                                                        })
+                                                    ]
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableBody, {
+                                                children: report.audiences.map((audience)=>/*#__PURE__*/ _jsxs(TableRow, {
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                children: audience.label
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                align: "right",
+                                                                children: audience.campaigns.toLocaleString()
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                align: "right",
+                                                                sx: {
+                                                                    fontWeight: 'bold'
+                                                                },
+                                                                children: audience.addressed.toLocaleString()
+                                                            })
+                                                        ]
+                                                    }, audience.id))
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "caption",
+                                        color: "text.secondary",
+                                        children: 'Each list is named as it was when the email was sent, so ' + 'renaming or deleting a list does not rewrite what a past ' + 'send went to.'
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                color: "text.secondary",
+                                children: 'No email sent from this template has gone out yet.'
+                            })
+                        }),
+                        orderedMessages.length ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Divider, {}),
+                                /*#__PURE__*/ _jsx(Section, {
+                                    title: "Emails using this template",
+                                    children: /*#__PURE__*/ _jsxs(ScrollTable, {
+                                        size: "small",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TableHead, {
+                                                children: /*#__PURE__*/ _jsxs(TableRow, {
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: 'Subject'
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: 'State'
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: 'When'
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            align: "right",
+                                                            children: 'Addressed'
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            align: "right",
+                                                            children: 'Opens'
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            align: "right",
+                                                            children: 'Clicks'
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            align: "right"
+                                                        })
+                                                    ]
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableBody, {
+                                                children: orderedMessages.map((message)=>{
+                                                    var _ref, _ref1, _ref2;
+                                                    var _message_stats, _message_stats1, _message_stats2;
+                                                    return /*#__PURE__*/ _jsxs(TableRow, {
+                                                        hover: true,
+                                                        onClick: ()=>router.push(messageHref(message)),
+                                                        sx: {
+                                                            cursor: 'pointer'
+                                                        },
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                children: /*#__PURE__*/ _jsx(AppLink, {
+                                                                    href: messageHref(message),
+                                                                    onClick: (event)=>event.stopPropagation(),
+                                                                    children: message.subject
+                                                                })
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                children: /*#__PURE__*/ _jsx(Chip, {
+                                                                    size: "small",
+                                                                    label: campaignSendDisplay(message).label
+                                                                })
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                children: message.scheduledForMs ? new Date(message.scheduledForMs).toLocaleString() : '—'
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                align: "right",
+                                                                children: Number((_ref = (_message_stats = message.stats) == null ? void 0 : _message_stats.recipients) != null ? _ref : 0).toLocaleString()
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                align: "right",
+                                                                children: Number((_ref1 = (_message_stats1 = message.stats) == null ? void 0 : _message_stats1.opens) != null ? _ref1 : 0).toLocaleString()
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                align: "right",
+                                                                children: Number((_ref2 = (_message_stats2 = message.stats) == null ? void 0 : _message_stats2.clicks) != null ? _ref2 : 0).toLocaleString()
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                align: "right",
+                                                                sx: {
+                                                                    width: 56
+                                                                },
+                                                                onClick: (event)=>event.stopPropagation(),
+                                                                children: /*#__PURE__*/ _jsx(RowActionsMenu, {
+                                                                    label: String(message.subject),
+                                                                    items: messageActions(message)
+                                                                })
+                                                            })
+                                                        ]
+                                                    }, message.campaignId);
+                                                })
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        }) : null
+                    ]
+                })
+            }),
+            RecipientsZone ? /*#__PURE__*/ _jsx(Suspense, {
+                fallback: null,
+                children: /*#__PURE__*/ _jsx(RecipientsZone, {
+                    slot: EMAIL_TEMPLATE_RECIPIENTS_ZONE.id,
+                    hostId: hostId,
+                    screenId: screenId
+                })
+            }) : null,
+            /*#__PURE__*/ _jsx(CardDisplay, {
+                header: 'Preview',
+                help: previewDocsHelp,
+                contentGutterX: true,
+                contentGutterY: true,
+                children: /*#__PURE__*/ _jsx(EmailDesignPreview, {
+                    hostId: hostId,
+                    nodes: version == null ? void 0 : version.nodes,
+                    loading: version === undefined && Boolean(versionId),
+                    subject: String((_ref2 = screen == null ? void 0 : screen.emailSubject) != null ? _ref2 : ''),
+                    preheader: String((_ref3 = screen == null ? void 0 : screen.emailPreheader) != null ? _ref3 : ''),
+                    emptyMessage: 'This template has nothing in it yet. Open it in the ' + 'besigner to build the email.'
+                })
+            })
+        ]
+    });
+}
+EmailTemplateDetail.displayName = 'EmailTemplateDetail';
+export default EmailTemplateDetail;
+
+//# sourceMappingURL=email-template-detail.js.map