@aglyn/plugins-email 1.0.0-beta.221 → 1.0.0-beta.222

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

@@ -15,45 +15,28 @@
  * 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { buildRoute, PageHeaderRecord, pluginDocsHelp, Route } from "@aglyn/aglyn";
 import { artifactRenameListKeys } from "@aglyn/aglyn/app-utils/artifact-list-keys";
 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, useOrgDataScope } 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 { useConsoleHostRoute, useFirestore, useFirestoreDoc } from "@aglyn/tenant-feature-instance";
+import { Alert, Button, Stack, TextField, Typography } from "@mui/material";
+import { doc, updateDoc } from "firebase/firestore";
 import { Suspense, useMemo, useState } from "react";
 import { useSnackbar } from "@aglyn/shared-ui-snackstack";
-import { CAMPAIGN_SEND_CONTAINER_FIELD, campaignSendVisibleTo, orgCampaignSendsPath } 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-jsx/components/measured-figures.component";
+import { EMAIL_TEMPLATE_RECIPIENTS_ZONE, EMAIL_TEMPLATE_REPORT_ZONE } from "./email-zones.js";
+import { Section } from "@aglyn/shared-ui-jsx/components/measured-figures.component";
 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.'
+    excerpt: 'One email template: its name, where it came from, and what it looks ' + 'like. The emails sent from it are reported beneath, by the plugin that ' + 'sends them.'
 });
 /**
  * ONE EMAIL TEMPLATE: what it looks like, and what it has done.
@@ -77,25 +60,17 @@ const templateDocsHelp = pluginDocsHelp('designedEmails', {
  *
  * ## 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.
+ * The screen document and its published version. The messages sent from the
+ * template are a send's, and sends are the campaign owner's: this page hosts
+ * two zones that plugin fills — the report of what those messages did, and
+ * who received them — handing over the site, the template and this page's
+ * base path, and reads none of the sends itself (AGL-3080).
  */ export function EmailTemplateDetail(props) {
-    var _ref, _ref1, _ref2, _ref3;
+    var _ref, _ref1, _ref2;
     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 Zone = useConsoleWidgetSlot();
     const firestore = useFirestore();
-    const router = useRouter();
     const { enqueueSnackbar } = useSnackbar();
     /*==========================================
    * RENAMING THE DESIGN, on its own page.
@@ -151,110 +126,9 @@ const templateDocsHelp = pluginDocsHelp('designedEmails', {
         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, and the
-   * rows are sorted by date below over a window this component already holds.
-   * The index the filters need is `visibleTo` + `templateScreenId`, declared
-   * in `cloud/firebase-firestore.indexes.json`.
-   *
-   * One MORE than the ceiling, so truncation is a fact rather than a guess.
-   *
-   * The sends are the ORGANIZATION'S, each stamped with the one site it is
-   * sent as. The `visibleTo` clause names this site: it keeps a sibling
-   * site's sends of a same-id design out, and it is what makes the read
-   * provable for a collaborator scoped to this site — the rules evaluate a
-   * list per document, and an unfiltered one is refused whole. Nothing is
-   * read until the site's org is known.
-   */ const { orgId } = useOrgDataScope({
-        hostId
-    });
-    const sendScope = useMemo(()=>campaignSendVisibleTo(hostId), [
-        hostId
-    ]);
-    const { data: messageDocs } = useFirestoreCollection(()=>orgId ? query(collection(firestore, ...orgCampaignSendsPath(orgId)), where('visibleTo', 'array-contains-any', sendScope), where('templateScreenId', '==', screenId), orderBy(documentId()), limit(TEMPLATE_CAMPAIGN_CEILING + 1)) : null, [
-        firestore,
-        orgId,
-        sendScope,
-        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,
@@ -355,10 +229,6 @@ const templateDocsHelp = pluginDocsHelp('designedEmails', {
                             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, {
@@ -371,7 +241,7 @@ const templateDocsHelp = pluginDocsHelp('designedEmails', {
                                     /*#__PURE__*/ _jsx(TextField, {
                                         label: "Design name",
                                         size: "small",
-                                        value: nameDraft != null ? nameDraft : String((_ref1 = screen == null ? void 0 : screen.displayName) != null ? _ref1 : ''),
+                                        value: nameDraft != null ? nameDraft : String((_ref = screen == null ? void 0 : screen.displayName) != null ? _ref : ''),
                                         onChange: (event)=>setNameDraft(event.target.value),
                                         sx: {
                                             minWidth: 280
@@ -386,289 +256,22 @@ const templateDocsHelp = pluginDocsHelp('designedEmails', {
                                     })
                                 ]
                             })
-                        }),
-                        /*#__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, {
+            Zone ? /*#__PURE__*/ _jsx(Suspense, {
+                fallback: null,
+                children: /*#__PURE__*/ _jsx(Zone, {
+                    slot: EMAIL_TEMPLATE_REPORT_ZONE.id,
+                    hostId: hostId,
+                    screenId: screenId,
+                    basePath: basePath
+                })
+            }) : null,
+            Zone ? /*#__PURE__*/ _jsx(Suspense, {
                 fallback: null,
-                children: /*#__PURE__*/ _jsx(RecipientsZone, {
+                children: /*#__PURE__*/ _jsx(Zone, {
                     slot: EMAIL_TEMPLATE_RECIPIENTS_ZONE.id,
                     hostId: hostId,
                     screenId: screenId
@@ -683,8 +286,8 @@ const templateDocsHelp = pluginDocsHelp('designedEmails', {
                     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 : ''),
+                    subject: String((_ref1 = screen == null ? void 0 : screen.emailSubject) != null ? _ref1 : ''),
+                    preheader: String((_ref2 = screen == null ? void 0 : screen.emailPreheader) != null ? _ref2 : ''),
                     emptyMessage: 'This template has nothing in it yet. Open it in the ' + 'besigner to build the email.'
                 })
             })