@aglyn/plugins-marketing 1.0.0-beta.143

package/src/lib/components/campaign-composer.js

@@ -0,0 +1,1643 @@
+/**
+ * @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 } from "react/jsx-runtime";
+import { buildRoute, checkQuota, Route } from "@aglyn/aglyn";
+import { EMAIL_MERGE_TAGS, emailMessageMode, emailPlainTextState } from "@aglyn/aglyn/app-utils/recipient-email-render";
+import { useConfirmationContext } from "@aglyn/shared-ui-jsx";
+import QuotaReadoutComponent from "@aglyn/shared-ui-jsx/components/quota-readout.component";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { Alert, Box, Button, Chip, Divider, MenuItem, Stack, TextField, Typography } from "@mui/material";
+import { collection, doc, limit, query } from "firebase/firestore";
+import { CampaignDesignCreate, CampaignSenderEditor, CampaignTopicSelect } from "./campaign-email-zones.js";
+import { useCampaignSendApi } from "./use-campaign-send-api.js";
+import { useSendingApi } from "@aglyn/tenant-feature-instance/hooks/use-sending-identity-api";
+import { describeCallFailure } from "@aglyn/shared-util-http/authorized-token";
+import CampaignTestSendDrawer from "./campaign-test-send-drawer.js";
+import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useConsoleHostRoute, useFirestore, useFirestoreCollection, useFirestoreDoc, useOrgDataScope, useHostOrgId, useOrgPlan } from "@aglyn/tenant-feature-instance";
+// The besigner route is `/[orgSlug]/hosts/[host]/screens/[screenId]/
+// versions/[versionId]/besigner`. Takes the resolved org slug + subdomain,
+// not a host doc id.
+const besignerHref = (orgSlug, host, screenId, versionId)=>buildRoute(Route.SCREEN_BESIGNER, {
+        orgSlug,
+        host,
+        screenId,
+        versionId
+    });
+/**
+ * How long the composer waits after a keystroke before asking the server to
+ * re-render the message.
+ *
+ * Longer than the audience debounce below because it fires on typing rather
+ * than on a picker: a merchant writing a paragraph would otherwise issue a
+ * render for every pause in it.
+ */ const RENDER_DEBOUNCE_MS = 600;
+/** How long the audience picker settles before the count is re-resolved. */ const COUNT_DEBOUNCE_MS = 400;
+const plural = (count, noun)=>`${count.toLocaleString()} ${noun}${count === 1 ? '' : 's'}`;
+/**
+ * COMPOSE AND SEND ONE EMAIL.
+ *
+ * Everything a merchant decides about a single message: who it goes to, what
+ * it says, who it appears to come from, what it will look like, and — before
+ * the button that cannot be taken back — how many people it reaches and how
+ * many it does not.
+ */ /**
+ * The picker entry that OPENS THE SENDER EDITOR rather than selecting a row.
+ *
+ * A one-off address is deliberately not offered, and this is what replaces it.
+ * An address typed into one campaign and stored nowhere is a mailbox nobody
+ * serves — its bounces come back to nothing and a client ignoring `Reply-To:`
+ * answers into a void — which does not stop being true because the merchant
+ * meant it. What they actually want is a sender they had not set up yet, and
+ * from here that costs one drawer: validated once, served, and reusable.
+ *
+ * A one-off NAME and a one-off reply address are a different matter and have
+ * always worked, as the two per-send fields below.
+ */ const ADD_SENDER_OPTION = 'add-a-sender';
+/**
+ * What one of the two per-send sender fields is DOING, in a sentence.
+ *
+ * Three states, and the middle one is why this exists. The composer seeds both
+ * fields from the chosen sender, so a merchant opening a new email finds them
+ * already filled with values that are defined on another screen — and a field
+ * that silently matches a setting elsewhere reads as a second definition of
+ * it, which is exactly the "two pages define overlapping things" confusion the
+ * From line above was missing.
+ *
+ * Naming the inheritance costs a sentence and settles it: the value came from
+ * the sender, editing it is per-email, and the sender is unchanged either way.
+ * The send agrees — `campaign-send.ts` resolves `options.fromName ||
+ * branding.fromName`, so what is submitted here is what goes out and what is
+ * recorded on the report.
+ */ function senderFieldHelp(field, saved, current) {
+    const base = field === 'name' ? 'Shown in front of the address.' : 'Where replies go — any mailbox, including a personal one.';
+    if (!saved) {
+        return field === 'name' ? `${base} Your brand name is used when this is empty.` : base;
+    }
+    return current.trim() === saved ? `${base} This is the sender’s saved ${field}; editing it changes this email only.` : `${base} Overrides the sender’s saved ${field}, ${saved}, for this email only.`;
+}
+export function CampaignComposer(props) {
+    var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _find, _ref18, _ref19, _ref20, _ref21, _ref22;
+    var _identityOptions_find;
+    const { hostId, emailCampaignId, campaignListIds, campaignTopicId, displayName, campaignId, initial, onSent } = props;
+    const { orgSlug, subdomain } = useConsoleHostRoute(hostId);
+    // Org-shared data root. Null until the org lookup settles, and for a host
+    // with no owning org — so the audience picker offers the built-ins alone
+    // rather than segments and lists from a dead path.
+    const { scope: dataScope } = useOrgDataScope({
+        hostId
+    });
+    const firestore = useFirestore();
+    const { enqueueSnackbar } = useSnackbar();
+    const { confirm } = useConfirmationContext();
+    const router = useRouter();
+    // Contact segments join the built-in audiences.
+    const { data: segmentDocs } = useFirestoreCollection(()=>dataScope ? query(collection(firestore, dataScope[0], dataScope[1], 'contactSegments'), limit(50)) : null, [
+        firestore,
+        dataScope
+    ], {
+        idField: '$id'
+    });
+    const segments = [
+        ...segmentDocs != null ? segmentDocs : []
+    ].sort((a, b)=>{
+        var _a_name, _b_name;
+        return String((_a_name = a.name) != null ? _a_name : '').localeCompare(String((_b_name = b.name) != null ? _b_name : ''));
+    });
+    // Org email lists join the audiences.
+    const { data: listDocs } = useFirestoreCollection(()=>dataScope ? query(collection(firestore, dataScope[0], dataScope[1], 'lists'), limit(50)) : null, [
+        firestore,
+        dataScope
+    ], {
+        idField: '$id'
+    });
+    const lists = [
+        ...listDocs != null ? listDocs : []
+    ].sort((a, b)=>{
+        var _a_name, _b_name;
+        return String((_a_name = a.name) != null ? _a_name : '').localeCompare(String((_b_name = b.name) != null ? _b_name : ''));
+    });
+    /**
+   * The monthly campaign allowance, standing rather than only on refusal.
+   *
+   * READ THE ENFORCEABLE METER, NOT THE COST ONE. `emailSends` beside it
+   * counts every receipt, booking reminder and password reset the site sent;
+   * showing that total against this cap would tell a merchant they had spent
+   * their campaign allowance on order confirmations.
+   *
+   * PER ORG, because that is where the cap is enforced.
+   * `emailSendsPerMonth` is an ORG entitlement and `reserveCampaignEmailSends`
+   * claims against `orgs/{orgId}/counters/campaignEmailSends[YYYY-MM]`. A
+   * readout and its gate must read the same counter — the number a merchant
+   * checks before pressing Send is the worst possible place for a second
+   * opinion.
+   */ const { org, ready: orgReady } = useOrgPlan(hostId);
+    const campaignOrgId = useHostOrgId(hostId);
+    const campaignMonthKey = new Date().toISOString().slice(0, 7);
+    const { data: campaignSendCounter } = useFirestoreDoc(()=>campaignOrgId ? doc(firestore, 'orgs', campaignOrgId, 'counters', 'campaignEmailSends') : null, [
+        firestore,
+        campaignOrgId
+    ]);
+    // An org that has never sent a campaign has no counter document at all;
+    // that is a settled zero, and the same zero `orgCampaignEmailSendsForMonth`
+    // resolves it to on the server.
+    const campaignSendsUsed = Number((_ref = campaignSendCounter == null ? void 0 : campaignSendCounter[campaignMonthKey]) != null ? _ref : 0);
+    // Email A/B experiments: running (or winner-decided) email experiments the
+    // composer can attach.
+    const { data: experimentDocs } = useFirestoreCollection(()=>query(collection(firestore, 'hosts', hostId, 'experiments'), limit(50)), [
+        firestore,
+        hostId
+    ], {
+        idField: '$id'
+    });
+    const emailExperiments = [
+        ...experimentDocs != null ? experimentDocs : []
+    ].filter((experiment)=>!experiment.deletedAt && experiment.target === 'email' && (experiment.status === 'running' || experiment.winnerVariantId)).sort((a, b)=>{
+        var _a_name, _b_name;
+        return String((_a_name = a.name) != null ? _a_name : '').localeCompare(String((_b_name = b.name) != null ? _b_name : ''));
+    });
+    // Designed emails: besigner email documents are screens with kind 'email';
+    // campaigns reference them by screen id.
+    const { data: screenDocs } = useFirestoreCollection(()=>query(collection(firestore, 'hosts', hostId, 'screens'), limit(200)), [
+        firestore,
+        hostId
+    ], {
+        idField: '$id'
+    });
+    const emailScreens = [
+        ...screenDocs != null ? screenDocs : []
+    ].filter((screen)=>!screen.deletedAt && screen.kind === 'email').sort((a, b)=>{
+        var _a_displayName, _b_displayName;
+        return String((_a_displayName = a.displayName) != null ? _a_displayName : '').localeCompare(String((_b_displayName = b.displayName) != null ? _b_displayName : ''));
+    });
+    /*
+   * The stored audience, back in the picker's own `kind:id` form.
+   *
+   * The record keeps the kind and the id in two fields because that is what
+   * the send path reads; the picker is one control, so the two are rejoined
+   * here. A composer opened on an existing email that defaulted to Leads
+   * would be one save away from silently re-aiming it.
+   */ const storedAudience = (initial == null ? void 0 : initial.audience) ? initial.audience === 'list' && initial.listId ? `list:${initial.listId}` : initial.audience === 'segment' && initial.segmentId ? `segment:${initial.segmentId}` : initial.audience : '';
+    const [subject, setSubject] = useState((_ref1 = initial == null ? void 0 : initial.subject) != null ? _ref1 : '');
+    const [body, setBody] = useState((_ref2 = initial == null ? void 0 : initial.body) != null ? _ref2 : '');
+    const [fromName, setFromName] = useState((_ref3 = initial == null ? void 0 : initial.fromName) != null ? _ref3 : '');
+    const [replyTo, setReplyTo] = useState((_ref4 = initial == null ? void 0 : initial.replyTo) != null ? _ref4 : '');
+    const [preheader, setPreheader] = useState((_ref5 = initial == null ? void 0 : initial.preheader) != null ? _ref5 : '');
+    /**
+   * WHICH OF THIS SITE'S IDENTITIES THIS EMAIL LEAVES ON.
+   *
+   * Two values and no more — empty for the site's standing selection, and
+   * `platform` for the domain the platform issued the site, which is what
+   * clearing the selection resolves to. It is deliberately not a domain name:
+   * which custom domain a site may use is an org-admin decision stored on the
+   * host, and a composer that could name one would be a way for a site editor
+   * to send as a domain their site was never given.
+   */ const [sendingIdentity, setSendingIdentity] = useState((_ref6 = initial == null ? void 0 : initial.sendingIdentity) != null ? _ref6 : '');
+    /**
+   * WHICH OF THE SITE'S SENDERS THIS EMAIL GOES OUT AS.
+   *
+   * An id into `hosts/{hostId}/senders`, empty for the site's default. It is
+   * an id and not an address, which is the difference between this and the
+   * field above it: the mailbox behind it was configured once under the
+   * organization-admin gate, so a composer choosing here can only reach an
+   * address the site was already set up to send as.
+   */ const [senderId, setSenderId] = useState((_ref7 = initial == null ? void 0 : initial.senderId) != null ? _ref7 : '');
+    /*
+   * The sender this composer OPENED on, which is a stable prop rather than the
+   * state above. The identity read below seeds two fields from it, and
+   * depending on the state would re-issue that request every time somebody
+   * changed the picker.
+   */ const openedAsSenderId = (_ref8 = initial == null ? void 0 : initial.senderId) != null ? _ref8 : '';
+    /*
+   * The campaign's own list is where the composer opens, because a send
+   * composed inside a campaign aimed at a list is overwhelmingly a send to
+   * that list — and an audience picker that defaults to Leads inside such a
+   * campaign is one wrong keystroke away from mailing the wrong people.
+   */ const [audience, setAudience] = useState(storedAudience || ((campaignListIds == null ? void 0 : campaignListIds[0]) ? `list:${campaignListIds[0]}` : 'leads'));
+    const [experimentId, setExperimentId] = useState('');
+    /*
+   * WHICH STREAM this email belongs to.
+   *
+   * Empty until the picker settles it against the org's catalog, and sent on
+   * every request that resolves an audience — the count as much as the send.
+   * `filterTopicSendable` removes the people who have left this stream, so a
+   * preview taken without the topic reports a reach the send will not deliver,
+   * and a send taken without it records `marketing` for a sales campaign,
+   * which is the opt-out a recipient already exercised being ignored.
+   */ const [topicId, setTopicId] = useState((_ref9 = (_ref10 = initial == null ? void 0 : initial.topicId) != null ? _ref10 : campaignTopicId) != null ? _ref9 : '');
+    const [templateScreenId, setTemplateScreenId] = useState((_ref11 = initial == null ? void 0 : initial.templateScreenId) != null ? _ref11 : '');
+    /**
+   * HOW THIS EMAIL IS WRITTEN — a choice, not an inference.
+   *
+   * The form used to show a design picker and a message box at once and say
+   * nothing about which one the send would use. It used the design and dropped
+   * the message, silently, so a merchant who did both mailed something they
+   * had not written.
+   *
+   * TWO modes, because the data model has two things and not three: a saved
+   * TEMPLATE is a besigner email screen — the same `kind: 'email'` document
+   * the picker below lists and "Design this email" creates — so "designed"
+   * and "from a template" are one mode under two names. There is no third
+   * thing to offer.
+   *
+   * Seeded from the record through the same resolver the send path reads, so
+   * a draft reopens in the mode it was saved in rather than in whichever the
+   * form happens to default to.
+   */ const [mode, setMode] = useState(()=>emailMessageMode({
+            templateScreenId: initial == null ? void 0 : initial.templateScreenId
+        }));
+    /**
+   * WHERE A DESIGNED EMAIL'S PLAIN-TEXT HALF COMES FROM.
+   *
+   * Generated by default — the design already produces one, and it is what
+   * every designed campaign has always mailed. `authored` is the deliberate
+   * override, held as its own state rather than inferred from the text being
+   * non-empty: choosing to write one and then clearing the box would
+   * otherwise snap the choice back under the author's hands.
+   *
+   * The RECORD still says it with presence alone — a stored `plainText` is an
+   * override and an absent one is generated — so there is no flag on the
+   * document to fall out of step with the value beside it.
+   */ const [plainTextSource, setPlainTextSource] = useState(()=>emailPlainTextState({
+            plainText: initial == null ? void 0 : initial.plainText
+        }).source);
+    const [plainText, setPlainText] = useState((_ref12 = initial == null ? void 0 : initial.plainText) != null ? _ref12 : '');
+    /**
+   * Which design version the text part above was written against.
+   *
+   * Stamped on every edit, so the record carries the answer to "does this
+   * still describe the design" rather than leaving a reader to guess. The
+   * composer compares it with the design's current version and says when the
+   * two have parted; nothing overwrites the author's words on their behalf.
+   */ const [plainTextVersionId, setPlainTextVersionId] = useState((_ref13 = initial == null ? void 0 : initial.plainTextVersionId) != null ? _ref13 : '');
+    // Scheduling: a future timestamp turns Send into Schedule.
+    const [sendAt, setSendAt] = useState('');
+    /** Whether the sender editor is open, opened from the From picker. */ const [addingSender, setAddingSender] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [showPreview, setShowPreview] = useState(false);
+    const designed = mode === 'design';
+    /*==========================================
+   * WHAT THIS COMPOSER SUBMITS: the field its mode owns, and nothing else.
+   *
+   * Both halves are kept in component state while the form is open, so
+   * switching modes to look at the other one and switching back loses no
+   * typing. Only one of them is ever SENT — which is what makes the discard
+   * impossible from here rather than merely warned about, and what keeps the
+   * stored record in one mode instead of carrying two sources for the route
+   * to choose between later.
+   *=========================================*/ const sentTemplateScreenId = designed ? templateScreenId : '';
+    const sentBody = designed ? '' : body.trim();
+    /*
+   * The text half rides only where it has a job. On a plain-text email the
+   * body IS the text part, so an override there would be a second source for
+   * the same half — which the route refuses, and which this never submits.
+   */ const sentPlainText = designed && plainTextSource === 'authored' ? plainText.trim() : '';
+    /** Whether the mode has what it needs — a design, or something written. */ const messageReady = designed ? Boolean(templateScreenId) : Boolean(body.trim());
+    const selectedTemplate = emailScreens.find((screen)=>screen.$id === templateScreenId);
+    /*
+   * The draft save, reachable from above its declaration. `handleDesignCreated`
+   * persists the created design onto the record through the same save the
+   * Save draft button uses, and that callback closes over most of the form —
+   * a ref keeps this one from having to depend on all of it.
+   */ const handleSaveDraftRef = useRef(null);
+    /**
+   * A DESIGN FOR THIS EMAIL, without making the author think in templates.
+   *
+   * A one-off campaign does not want a reusable artifact — it wants its own
+   * design document. The data model has only one shape for that (a `kind:
+   * 'email'` screen, the same document the picker lists), so this mints one,
+   * but named after the email it belongs to rather than "Untitled email":
+   * the name is the only thing that tells one design from another in the
+   * picker, and a list of identical "Untitled email" rows tells nobody
+   * anything. Saved templates stay what they are — picking one from the
+   * select above is the reuse path.
+   *
+   * The selection is written onto the record before the editor navigation
+   * unmounts this form; without that, the design would exist while the
+   * campaign still pointed at nothing, and the author would have to come
+   * back and find their own screen in the picker.
+   */ const handleDesignFailed = useCallback((error)=>{
+        var _ref;
+        console.error(error);
+        enqueueSnackbar((_ref = error == null ? void 0 : error.message) != null ? _ref : 'Creating the email design failed', {
+            variant: 'error'
+        });
+    }, [
+        enqueueSnackbar
+    ]);
+    /*
+   * The design itself is minted by the widget in the create zone — a design
+   * document is the email plugin's — and named here. What is this composer's
+   * is the campaign: recording the choice on it, and opening the editor.
+   */ const handleDesignCreated = useCallback(async (design)=>{
+        const { screenId, versionId } = design;
+        try {
+            setTemplateScreenId(screenId);
+            if (campaignId) {
+                await (handleSaveDraftRef.current == null ? void 0 : handleSaveDraftRef.current.call(handleSaveDraftRef, {
+                    templateScreenId: screenId
+                }));
+            }
+            if (orgSlug && subdomain) {
+                void router.push(besignerHref(orgSlug, subdomain, screenId, versionId));
+            }
+        } catch (error) {
+            handleDesignFailed(error);
+        }
+    }, [
+        campaignId,
+        orgSlug,
+        subdomain,
+        router,
+        handleDesignFailed
+    ]);
+    /*
+   * The one authorized caller of the campaign API, shared with the email
+   * detail page's "send to more people". It holds the user in a ref for a
+   * reason the preview effects below depend on — see the hook.
+   */ const authorizedPost = useCampaignSendApi(hostId);
+    /*
+   * Proofing is a drawer now, not a button that mails you.
+   *
+   * "Send test to me" could only ever answer one of the three questions a
+   * proof is asked: what does this look like, to somebody with real data, at
+   * an address I can actually open. It mailed the caller, rendered against
+   * the caller, from whatever identity the site happened to hold — so a
+   * merchant checking their merge tags saw the fallbacks every time.
+   */ const [testOpen, setTestOpen] = useState(false);
+    /*
+   * The audience select's value packs the kind and the id into one string
+   * (`list:abc`). Decomposed ONCE here so the preview and the send cannot
+   * disagree about what they are asking for — they had two copies of this
+   * split, which is how a preview counts a segment while the send resolves
+   * a list.
+   */ const audienceKind = audience.startsWith('segment:') ? 'segment' : audience.startsWith('list:') ? 'list' : audience;
+    const segmentId = audience.startsWith('segment:') ? audience.slice('segment:'.length) : '';
+    const listId = audience.startsWith('list:') ? audience.slice('list:'.length) : '';
+    /**
+   * HOW MANY PEOPLE, AND ON WHAT BASIS — a dry run of the real send path.
+   *
+   * It comes from the send path rather than a count of its own, so it has
+   * already been through audience resolution, de-duplication, the consent
+   * rule, the per-send cap, the suppression list and the monthly quota.
+   * Counting the audience here instead would be a second set of rules to
+   * drift from the one that decides what actually goes out — on the one
+   * number a merchant checks before pressing Send.
+   */ const [preview, setPreview] = useState(null);
+    useEffect(()=>{
+        let active = true;
+        setPreview(null);
+        // Debounced: switching audience with the keyboard walks the whole
+        // list, and each stop would otherwise be a full audience resolution.
+        const timer = setTimeout(async ()=>{
+            try {
+                var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8;
+                /*
+         * NO SUBJECT AND NO BODY, and that is the point of this request.
+         *
+         * The count is a fact about the AUDIENCE. Nothing in resolving it
+         * reads the copy, so nothing about the copy may gate it — a merchant
+         * asks "how many people is this" before writing the email, which is
+         * when the answer is worth having. Sending the draft along would also
+         * put the composer's whole audience resolution — up to five thousand
+         * documents — behind every keystroke, for a number that had not moved.
+         * The message itself is previewed by `rendered` below, which resolves
+         * nobody.
+         */ const { response, payload } = await authorizedPost(_extends({
+                    action: 'preview',
+                    audience: audienceKind
+                }, segmentId ? {
+                    segmentId
+                } : {}, listId ? {
+                    listId
+                } : {}, topicId ? {
+                    topicId
+                } : {}, sendingIdentity ? {
+                    sendingIdentity
+                } : {}, senderId ? {
+                    senderId
+                } : {}));
+                if (!active) return;
+                if (!response.ok) {
+                    var _ref9;
+                    // The refusals are useful, not noise: "The audience is empty"
+                    // and the monthly-cap message are exactly what a merchant needs
+                    // BEFORE writing the email rather than after.
+                    //
+                    // A 409 is the one that must also STOP the send. Every other
+                    // refusal here is about the audience and can be true while the
+                    // email is still worth composing; this one says the message has
+                    // nowhere to leave from, and letting Send stay live would trade a
+                    // sentence the merchant can act on for the same 409 arriving after
+                    // the click.
+                    return setPreview({
+                        error: String((_ref9 = payload == null ? void 0 : payload.error) != null ? _ref9 : ''),
+                        blocking: response.status === 409
+                    });
+                }
+                setPreview({
+                    sendable: Number((_ref = payload == null ? void 0 : payload.sendable) != null ? _ref : 0),
+                    suppressed: Number((_ref1 = payload == null ? void 0 : payload.suppressed) != null ? _ref1 : 0),
+                    audienceSize: Number((_ref2 = payload == null ? void 0 : payload.audienceSize) != null ? _ref2 : 0),
+                    audienceTruncated: Boolean(payload == null ? void 0 : payload.audienceTruncated),
+                    consented: Number((_ref3 = payload == null ? void 0 : payload.consented) != null ? _ref3 : 0),
+                    grandfathered: Number((_ref4 = payload == null ? void 0 : payload.grandfathered) != null ? _ref4 : 0),
+                    consentWithheld: Number((_ref5 = payload == null ? void 0 : payload.consentWithheld) != null ? _ref5 : 0),
+                    cadenceHeld: Number((_ref6 = payload == null ? void 0 : payload.cadenceHeld) != null ? _ref6 : 0),
+                    identity: String((_ref7 = payload == null ? void 0 : payload.identity) != null ? _ref7 : ''),
+                    identitySource: (_ref8 = payload == null ? void 0 : payload.identitySource) != null ? _ref8 : null
+                });
+            } catch (error) {
+                /*
+         * A REFUSAL IS NOT A LOADING STATE.
+         *
+         * `null` is the value this holds before the first answer, and the
+         * readout renders it as "Counting recipients…". A call that failed
+         * before it ever reached the route — authorization that could not be
+         * obtained — has to read as the refusal it is, or the composer sits
+         * on a sentence about work it has stopped doing and the confirm
+         * dialog reports an unreadable count without saying why.
+         */ if (active) setPreview({
+                    error: describeCallFailure(error, 'Could not count this audience')
+                });
+            }
+        }, COUNT_DEBOUNCE_MS);
+        return ()=>{
+            active = false;
+            clearTimeout(timer);
+        };
+    }, [
+        authorizedPost,
+        audienceKind,
+        segmentId,
+        listId,
+        topicId,
+        sendingIdentity,
+        senderId
+    ]);
+    /**
+   * THE IDENTITIES THIS SITE MAY SEND AS, for the picker.
+   *
+   * One cheap read — the host document and at most one org subcollection
+   * document — issued once, and NOT part of the debounced count above: it
+   * answers a question about the site rather than about the message, so it
+   * cannot move while somebody types.
+   *
+   * The picker is only offered when there is a choice to make. A site with no
+   * verified domain has exactly one identity, and a select with one option is
+   * a control that reads as a decision the person failed to take.
+   */ const [identityOptions, setIdentityOptions] = useState(null);
+    /**
+   * The value that means "the site's standing selection" in the picker.
+   *
+   * The picker's options are keyed by domain (and `platform`), while the SEND
+   * carries the two-valued thing — empty or `platform`. This is the join
+   * between them, and it is derived from the options rather than stored: the
+   * site's own domain is whichever offered option is not the platform one.
+   */ const siteDefaultIdentity = (_ref14 = identityOptions == null ? void 0 : (_identityOptions_find = identityOptions.find((one)=>one.value !== 'platform')) == null ? void 0 : _identityOptions_find.value) != null ? _ref14 : 'platform';
+    /**
+   * The identity as the route reports it, whole.
+   *
+   * Kept rather than picked apart into the two fields this file reads,
+   * because the sender drawer opens from here and takes the same view the
+   * Sending card hands it — so the editor and the picker agree about what a
+   * sender currently is instead of holding two answers.
+   *
+   * Null until the read lands, so the controls below render nothing rather
+   * than an empty picker — the same reason `identityOptions` starts null.
+   */ const [identityView, setIdentityView] = useState(null);
+    const senders = (_ref15 = identityView == null ? void 0 : identityView.senders) != null ? _ref15 : null;
+    /**
+   * Bumped to re-read the identity, and the pending row to select when it
+   * lands.
+   *
+   * A sender added from the composer exists only after the route answers, so
+   * the selection cannot be made at the moment somebody presses Save — the
+   * list it would select from has not been read yet. The id is parked here and
+   * applied by the read, which is also what puts the new sender's name and
+   * reply address into the two fields below.
+   *
+   * A ref rather than state for the pending id: it is read INSIDE the effect,
+   * and as state it would be a dependency, so every selection would re-issue
+   * the request that had just answered.
+   */ const [identityReads, setIdentityReads] = useState(0);
+    const pendingSenderRef = useRef('');
+    const sendingApi = useSendingApi();
+    useEffect(()=>{
+        let active = true;
+        void (async ()=>{
+            var _ref, _ref1, _ref2, _ref3;
+            const { response, payload } = await sendingApi({
+                path: 'sending-identity',
+                method: 'GET',
+                query: {
+                    hostId
+                }
+            });
+            if (!active || !response.ok) return;
+            setIdentityOptions((_ref = payload == null ? void 0 : payload.options) != null ? _ref : []);
+            const rows = (_ref1 = payload == null ? void 0 : payload.senders) != null ? _ref1 : [];
+            setIdentityView(payload);
+            /*
+       * A sender just added from this composer is selected here, where the
+       * row it names finally exists, and brings its two fields with it —
+       * which is the same thing choosing an existing sender does.
+       */ const pending = pendingSenderRef.current;
+            pendingSenderRef.current = '';
+            const added = pending ? rows.find((one)=>one.id === pending) : null;
+            if (added) {
+                var _added_fromName, _added_replyTo;
+                setSenderId(added.id);
+                setFromName((_added_fromName = added.fromName) != null ? _added_fromName : '');
+                setReplyTo((_added_replyTo = added.replyTo) != null ? _added_replyTo : '');
+                return;
+            }
+            /*
+       * THE SENDER'S NAME AND REPLY ADDRESS, AS A STARTING POINT AND NOT AS
+       * AN OVERRIDE.
+       *
+       * A sender carries who its mail comes from — a person's name and where
+       * their replies land — and this is where that reaches a campaign. It is
+       * applied only to a field that is still empty, so it seeds a new
+       * composer and never rewrites a value somebody typed, and never one a
+       * saved email already carries.
+       *
+       * Seeding rather than falling back at the send is the difference
+       * between a merchant SEEING who this will come from and finding out
+       * afterwards. It also keeps one answer on the record: the send stores
+       * the fields the composer submitted, so what the report says went out
+       * is what was on screen when somebody pressed the button.
+       *
+       * From the sender this email ALREADY names where it names one, and from
+       * the site's fields otherwise. An email set to go out as Jamie seeded
+       * from the site's default would open with the wrong person's name in
+       * front of Jamie's address.
+       */ const opened = openedAsSenderId ? rows.find((one)=>one.id === openedAsSenderId) : null;
+            const siteFromName = String((_ref2 = opened ? opened.fromName : payload == null ? void 0 : payload.fromName) != null ? _ref2 : '');
+            const siteReplyTo = String((_ref3 = opened ? opened.replyTo : payload == null ? void 0 : payload.replyTo) != null ? _ref3 : '');
+            if (siteFromName) setFromName((current)=>current || siteFromName);
+            if (siteReplyTo) setReplyTo((current)=>current || siteReplyTo);
+        })().catch(()=>undefined);
+        return ()=>{
+            active = false;
+        };
+    }, [
+        sendingApi,
+        hostId,
+        openedAsSenderId,
+        identityReads
+    ]);
+    /**
+   * CHOOSING A SENDER BRINGS THE THREE FIELDS IT CARRIES.
+   *
+   * Picking one is "send this as Jamie", so the display name and reply address
+   * configured beside the mailbox come with it — including when the sender has
+   * none, because leaving the previous person's name in front of somebody
+   * else's address is the one outcome nobody asked for. Both fields stay
+   * editable afterwards: they are per-message facts, and the send records what
+   * was submitted rather than re-deriving them.
+   */ const applySender = useCallback((next)=>{
+        var _chosen_fromName, _chosen_replyTo;
+        /*
+       * A REAL ROW ALWAYS WINS, and the sentinel is only reached when none
+       * matched. `ADD_SENDER_OPTION` is a value this product never mints as a
+       * document id, and checking the list first means that even if one ever
+       * arrived it would be selected as the sender it is rather than opening
+       * a drawer — a picker cannot be made to send as the wrong address by a
+       * value that happens to collide with a menu entry.
+       */ const chosen = (senders != null ? senders : []).find((one)=>one.id === next);
+        if (!chosen) {
+            if (next === ADD_SENDER_OPTION) setAddingSender(true);
+            return;
+        }
+        setSenderId(chosen.id);
+        setFromName((_chosen_fromName = chosen.fromName) != null ? _chosen_fromName : '');
+        setReplyTo((_chosen_replyTo = chosen.replyTo) != null ? _chosen_replyTo : '');
+    }, [
+        senders
+    ]);
+    /**
+   * The sender this email will actually leave as, and the address with it.
+   *
+   * Resolved from the list rather than from `senderId` alone, because an email
+   * that names no sender leaves on the site's DEFAULT — which is a real row
+   * with a real address, and the one the merchant needs to see when they have
+   * chosen nothing.
+   */ const chosenSender = (_ref16 = (_ref17 = (_find = (senders != null ? senders : []).find((one)=>one.id === senderId)) != null ? _find : (senders != null ? senders : []).find((one)=>one.isDefault)) != null ? _ref17 : (senders != null ? senders : [])[0]) != null ? _ref16 : null;
+    /**
+   * WHAT THE EMAIL LOOKS LIKE, rendered by the code that will mail it.
+   *
+   * Re-rendered as the copy changes and resolving no audience at all, which
+   * is why it is a second request rather than a field on the count above.
+   * Only while the pane is open: it reads the designed template and its
+   * products, and a merchant who never opens the preview should not pay for
+   * one on every campaign.
+   */ const [rendered, setRendered] = useState(null);
+    useEffect(()=>{
+        if (!showPreview) return setRendered(null);
+        let active = true;
+        setRendered(null);
+        const timer = setTimeout(async ()=>{
+            try {
+                var _ref, _ref1, _ref2;
+                const { response, payload } = await authorizedPost(_extends({
+                    action: 'renderPreview',
+                    subject: subject.trim(),
+                    body: sentBody,
+                    preheader: preheader.trim()
+                }, sentTemplateScreenId ? {
+                    templateScreenId: sentTemplateScreenId
+                } : {}, sentPlainText ? {
+                    plainText: sentPlainText
+                } : {}));
+                if (!active) return;
+                if (!response.ok) {
+                    var _ref3;
+                    return setRendered({
+                        error: String((_ref3 = payload == null ? void 0 : payload.error) != null ? _ref3 : 'Could not render this email')
+                    });
+                }
+                setRendered({
+                    subject: String((_ref = payload == null ? void 0 : payload.subject) != null ? _ref : ''),
+                    html: String((_ref1 = payload == null ? void 0 : payload.html) != null ? _ref1 : ''),
+                    text: String((_ref2 = payload == null ? void 0 : payload.text) != null ? _ref2 : '')
+                });
+            } catch (error) {
+                if (active) setRendered({
+                    error: describeCallFailure(error, 'Could not render this email')
+                });
+            }
+        }, RENDER_DEBOUNCE_MS);
+        return ()=>{
+            active = false;
+            clearTimeout(timer);
+        };
+    }, [
+        authorizedPost,
+        showPreview,
+        subject,
+        sentBody,
+        preheader,
+        sentTemplateScreenId,
+        sentPlainText
+    ]);
+    /**
+   * The design's OWN plain text, fetched once so an override starts from what
+   * it is replacing rather than from an empty box.
+   *
+   * `messageText` and not `text`: the rendered `text` ends in this preview's
+   * opt-out line, and folding that into a stored override would put a second
+   * footer in every message the send appends its own to.
+   *
+   * One request, on an explicit act. The preview effect above is deliberately
+   * behind a button because it re-renders as the copy changes; this fires when
+   * somebody chooses to write the text part, which happens once.
+   */ const [adoptingText, setAdoptingText] = useState(false);
+    const adoptGeneratedText = useCallback(async ()=>{
+        if (!templateScreenId || adoptingText) return;
+        setAdoptingText(true);
+        try {
+            var _ref, _ref1;
+            const { response, payload } = await authorizedPost({
+                action: 'renderPreview',
+                subject: subject.trim(),
+                body: '',
+                preheader: preheader.trim(),
+                templateScreenId
+            });
+            if (!response.ok) {
+                var _ref2;
+                return void enqueueSnackbar((_ref2 = payload == null ? void 0 : payload.error) != null ? _ref2 : 'The design’s text could not be read', {
+                    variant: 'warning',
+                    allowDuplicate: true
+                });
+            }
+            setPlainText(String((_ref = payload == null ? void 0 : payload.messageText) != null ? _ref : ''));
+            setPlainTextVersionId((_ref1 = selectedTemplate == null ? void 0 : selectedTemplate.versionId) != null ? _ref1 : '');
+        } catch (error) {
+            enqueueSnackbar(describeCallFailure(error, 'The design’s text could not be read'), {
+                variant: 'error',
+                allowDuplicate: true
+            });
+        } finally{
+            setAdoptingText(false);
+        }
+    }, [
+        templateScreenId,
+        adoptingText,
+        authorizedPost,
+        subject,
+        preheader,
+        selectedTemplate,
+        enqueueSnackbar
+    ]);
+    /**
+   * Whether the text part still describes the design, in the composer's own
+   * words.
+   *
+   * The same pure function the record's shape is defined by, so the notice on
+   * screen and the state stored cannot disagree about what is authored and
+   * what has gone stale.
+   */ const plainTextState = emailPlainTextState({
+        plainText: plainTextSource === 'authored' ? plainText : '',
+        plainTextVersionId
+    }, selectedTemplate == null ? void 0 : selectedTemplate.versionId);
+    const audienceLabel = audience === 'leads' ? 'lead' : audience === 'members' ? 'site member' : audience.startsWith('list:') ? 'list subscriber' : 'contact in the segment';
+    /**
+   * WHAT THE CONFIRM DIALOG SAYS, and why it says a number.
+   *
+   * A dialog for an irreversible bulk action has one job: state the size of
+   * what is about to happen. "goes to every list subscriber who hasn't
+   * unsubscribed" states a RULE, and a merchant cannot tell from a rule
+   * whether they are about to mail forty people or four thousand.
+   *
+   * Three cases, and the third is the one worth being careful about:
+   *
+   *  - the audience fits in one send — say how many;
+   *  - it does not — say how many of how many, because "every subscriber" is
+   *    then simply false and the remainder is never mailed by this send;
+   *  - the count could not be read — say THAT, and do not fall back to a
+   *    sentence that implies completeness. A confirm dialog that asserts a
+   *    reach it does not know is worse than one that admits it.
+   */ const counts = preview && !('error' in preview) ? preview : null;
+    const confirmDescription = useCallback((scheduling, sendAtMs)=>{
+        const quoted = `"${subject.trim()}"`;
+        const when = scheduling ? ` on ${new Date(sendAtMs).toLocaleString()}` : '';
+        if (!counts) {
+            const reason = preview && 'error' in preview && preview.error ? ` (${preview.error})` : '';
+            return `${quoted} goes to every ${audienceLabel} who hasn't ` + `unsubscribed${when}. The recipient count could not be read${reason}, ` + `so this send's size is unknown.`;
+        }
+        const short = counts.audienceSize > counts.sendable;
+        const reach = short ? `${plural(counts.sendable, `${audienceLabel}`)} of ` + `${counts.audienceSize.toLocaleString()}${counts.audienceTruncated ? ' or more' : ''} in this audience` : plural(counts.sendable, audienceLabel);
+        const withheld = [];
+        if (counts.consentWithheld) {
+            withheld.push(`${counts.consentWithheld.toLocaleString()} withheld — no marketing ` + `consent on record`);
+        }
+        if (counts.suppressed) {
+            withheld.push(`${counts.suppressed.toLocaleString()} unsubscribed or suppressed`);
+        }
+        /*
+       * Named separately from `suppressed`, because the two ask different
+       * things of a merchant. An address that unsubscribed is gone; one
+       * holding for its own cadence arrives at the next campaign outside its
+       * interval, and reading that as an unsubscribe would send somebody
+       * looking for a broken audience that is not broken.
+       */ if (counts.cadenceHeld) {
+            withheld.push(`${counts.cadenceHeld.toLocaleString()} asked for mail less often ` + `than this`);
+        }
+        if (counts.grandfathered) {
+            withheld.push(`${counts.grandfathered.toLocaleString()} reachable only because ` + `consent is not enforced retroactively`);
+        }
+        return `${quoted} goes to ${reach}${when}.` + (withheld.length ? ` Not counted: ${withheld.join('; ')}.` : '');
+    }, [
+        counts,
+        preview,
+        subject,
+        audienceLabel
+    ]);
+    const handleSend = useCallback(async ()=>{
+        if (!subject.trim() || !messageReady || busy) return;
+        const sendAtMs = sendAt ? new Date(sendAt).getTime() : 0;
+        const scheduling = Boolean(sendAtMs);
+        if (scheduling && sendAtMs <= Date.now()) {
+            return void enqueueSnackbar('Pick a future send time', {
+                variant: 'warning',
+                persist: false
+            });
+        }
+        const confirmed = await confirm({
+            title: scheduling ? 'Schedule this campaign?' : 'Send this campaign?',
+            description: confirmDescription(scheduling, sendAtMs),
+            confirmationText: scheduling ? 'Schedule' : 'Send'
+        }).then(()=>true).catch(()=>false);
+        if (!confirmed) return;
+        setBusy(true);
+        try {
+            const { response, payload } = await authorizedPost(_extends({}, scheduling ? {
+                action: 'schedule',
+                sendAtMs
+            } : {}, campaignId ? {
+                campaignId
+            } : {}, {
+                subject: subject.trim(),
+                body: sentBody,
+                audience: audienceKind
+            }, segmentId ? {
+                segmentId
+            } : {}, listId ? {
+                listId
+            } : {}, experimentId ? {
+                experimentId
+            } : {}, sentTemplateScreenId ? {
+                templateScreenId: sentTemplateScreenId
+            } : {}, sentPlainText ? {
+                plainText: sentPlainText
+            } : {}, emailCampaignId ? {
+                emailCampaignId
+            } : {}, displayName ? {
+                displayName
+            } : {}, topicId ? {
+                topicId
+            } : {}, senderId ? {
+                senderId
+            } : {}, {
+                fromName: fromName.trim(),
+                replyTo: replyTo.trim(),
+                preheader: preheader.trim()
+            }));
+            if (response.status === 501) {
+                return void enqueueSnackbar('Campaigns are not configured on this deployment', {
+                    variant: 'info',
+                    persist: false
+                });
+            }
+            if (!response.ok) {
+                var _ref;
+                return void enqueueSnackbar((_ref = payload == null ? void 0 : payload.error) != null ? _ref : 'Send failed', {
+                    variant: 'warning',
+                    allowDuplicate: true
+                });
+            }
+            enqueueSnackbar(scheduling ? `Scheduled for ${new Date(sendAtMs).toLocaleString()}` : `Sent to ${payload.sent} of ${payload.recipients} recipients`, {
+                variant: 'success',
+                persist: false
+            });
+            /*
+       * Cleared only when this composer mints its own sends.
+       *
+       * On an email's own page the fields ARE that email, and the record now
+       * holds exactly what was just sent — blanking them would show the
+       * merchant an empty composer for a message that went out a second ago.
+       */ if (!campaignId) {
+                setSubject('');
+                setBody('');
+                setSendAt('');
+                setPreheader('');
+            }
+            onSent == null ? void 0 : onSent();
+        } catch (error) {
+            /*
+       * A CLICK THAT DID NOTHING HAS TO SAY SO.
+       *
+       * This covers the failures that never reach the route at all — chiefly
+       * an ID token that cannot be obtained, which is awaited in front of the
+       * request. `describeCallFailure` lets that one name itself, because
+       * "nothing was sent, you are signed out" and "the send failed" call for
+       * different things from the person reading it.
+       */ console.error(error);
+            enqueueSnackbar(describeCallFailure(error, 'An error has occurred'), {
+                variant: 'error',
+                allowDuplicate: true
+            });
+        } finally{
+            setBusy(false);
+        }
+    }, [
+        subject,
+        sentBody,
+        sentPlainText,
+        messageReady,
+        audienceKind,
+        segmentId,
+        listId,
+        experimentId,
+        sentTemplateScreenId,
+        emailCampaignId,
+        topicId,
+        senderId,
+        fromName,
+        replyTo,
+        preheader,
+        sendAt,
+        busy,
+        campaignId,
+        displayName,
+        authorizedPost,
+        confirm,
+        confirmDescription,
+        enqueueSnackbar,
+        onSent
+    ]);
+    /*==========================================
+   * SAVING WITHOUT SENDING.
+   *
+   * The draft is the working document, and it has to be savable on its own —
+   * a composer whose only way out is Send is a composer that makes a merchant
+   * choose between mailing something half-written and losing it.
+   *
+   * Only offered when this composer is editing a record. Without a
+   * `campaignId` there is nothing to save INTO, and minting a draft from a
+   * surface that did not ask for one would leave unsent records behind every
+   * time somebody opened a composer and changed their mind.
+   *=========================================*/ const [saving, setSaving] = useState(false);
+    const handleSaveDraft = useCallback(/*
+     * `overrides.templateScreenId` exists for `handleDesignCreated`: it has
+     * just minted a design and set it into state, but state set this tick is
+     * not yet in `sentTemplateScreenId`, so the save it fires immediately
+     * after would record the record's previous design — or none.
+     */ async (overrides)=>{
+        var _ref;
+        if (!campaignId || saving) return;
+        const savedTemplateScreenId = (_ref = overrides == null ? void 0 : overrides.templateScreenId) != null ? _ref : sentTemplateScreenId;
+        setSaving(true);
+        try {
+            const { response, payload } = await authorizedPost(_extends({
+                action: 'draft',
+                campaignId,
+                subject: subject.trim(),
+                body: sentBody,
+                audience: audienceKind
+            }, segmentId ? {
+                segmentId
+            } : {}, listId ? {
+                listId
+            } : {}, experimentId ? {
+                experimentId
+            } : {}, savedTemplateScreenId ? {
+                templateScreenId: savedTemplateScreenId
+            } : {}, sentPlainText ? _extends({
+                plainText: sentPlainText
+            }, plainTextVersionId ? {
+                plainTextVersionId
+            } : {}) : {}, emailCampaignId ? {
+                emailCampaignId
+            } : {}, displayName ? {
+                displayName
+            } : {}, topicId ? {
+                topicId
+            } : {}, senderId ? {
+                senderId
+            } : {}, {
+                fromName: fromName.trim(),
+                replyTo: replyTo.trim(),
+                preheader: preheader.trim()
+            }));
+            if (!response.ok) {
+                var _ref1;
+                return void enqueueSnackbar((_ref1 = payload == null ? void 0 : payload.error) != null ? _ref1 : 'Draft not saved', {
+                    variant: 'warning',
+                    allowDuplicate: true
+                });
+            }
+            enqueueSnackbar('Draft saved', {
+                variant: 'success',
+                persist: false
+            });
+        } catch (error) {
+            console.error(error);
+            enqueueSnackbar(describeCallFailure(error, 'Draft not saved'), {
+                variant: 'error',
+                allowDuplicate: true
+            });
+        } finally{
+            setSaving(false);
+        }
+    }, [
+        campaignId,
+        saving,
+        authorizedPost,
+        subject,
+        sentBody,
+        sentPlainText,
+        plainTextVersionId,
+        audienceKind,
+        segmentId,
+        listId,
+        experimentId,
+        sentTemplateScreenId,
+        emailCampaignId,
+        displayName,
+        topicId,
+        senderId,
+        fromName,
+        replyTo,
+        preheader,
+        enqueueSnackbar
+    ]);
+    // Kept current every render; see the ref's declaration above.
+    handleSaveDraftRef.current = handleSaveDraft;
+    const quotaLimit = useMemo(()=>checkQuota(org, 'emailSendsPerMonth', campaignSendsUsed).limit, [
+        org,
+        campaignSendsUsed
+    ]);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1.5,
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'Send an update to your leads or site members. Every email ' + 'carries an unsubscribe link; monthly sends are capped by ' + 'your plan.'
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Subject",
+                        value: subject,
+                        onChange: (event)=>setSubject(event.target.value),
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        }
+                    }),
+                    /*#__PURE__*/ _jsxs(TextField, {
+                        select: true,
+                        label: "Audience",
+                        value: audience,
+                        onChange: (event)=>setAudience(event.target.value),
+                        size: "small",
+                        sx: {
+                            minWidth: 150
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "leads",
+                                children: 'Leads'
+                            }),
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "members",
+                                children: 'Site members'
+                            }),
+                            segments.map((segment)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                    value: `segment:${segment.$id}`,
+                                    children: `Segment: ${segment.name}`
+                                }, segment.$id)),
+                            lists.map((list)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                    value: `list:${list.$id}`,
+                                    children: `List: ${list.name}`
+                                }, list.$id))
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: preview === null ? 'Counting recipients…' : 'error' in preview ? preview.error || 'Could not count this audience' : `Recipients ${preview.sendable.toLocaleString()}` + (preview.audienceSize > preview.sendable ? ` of ${preview.audienceSize.toLocaleString()}${preview.audienceTruncated ? '+' : ''} in this audience` : '') + (preview.suppressed ? ` · ${preview.suppressed.toLocaleString()} unsubscribed or suppressed` : '') + (preview.cadenceHeld ? ` · ${preview.cadenceHeld.toLocaleString()} asked for mail less often than this` : '')
+            }),
+            counts && /*#__PURE__*/ _jsxs(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: [
+                    `In this audience: ${counts.consented.toLocaleString()} with a recorded consent basis`,
+                    counts.grandfathered ? ` · ${counts.grandfathered.toLocaleString()} grandfathered (captured before consent was required)` : '',
+                    counts.consentWithheld ? ` · ${counts.consentWithheld.toLocaleString()} withheld — no consent on record, never mailed` : ''
+                ]
+            }),
+            /*#__PURE__*/ _jsx(QuotaReadoutComponent, {
+                ready: orgReady,
+                used: campaignSendsUsed,
+                limit: quotaLimit,
+                noun: "campaign email",
+                nounPlural: "campaign emails",
+                period: "this month"
+            }),
+            /*#__PURE__*/ _jsx(Divider, {}),
+            /*#__PURE__*/ _jsx(CampaignTopicSelect, {
+                hostId: hostId,
+                value: topicId,
+                onChange: setTopicId,
+                disabled: busy
+            }),
+            ((_ref18 = identityOptions == null ? void 0 : identityOptions.filter((one)=>one.selectable).length) != null ? _ref18 : 0) > 1 ? /*#__PURE__*/ _jsx(TextField, {
+                select: true,
+                label: "From address",
+                value: sendingIdentity || siteDefaultIdentity,
+                onChange: (event)=>setSendingIdentity(event.target.value === siteDefaultIdentity ? '' : event.target.value),
+                size: "small",
+                helperText: "Which verified address this email leaves on",
+                children: (identityOptions != null ? identityOptions : []).filter((one)=>one.selectable).map((one)=>{
+                    var _one_from;
+                    return /*#__PURE__*/ _jsx(MenuItem, {
+                        value: one.value,
+                        children: (_one_from = one.from) != null ? _one_from : one.value
+                    }, one.value);
+                })
+            }) : null,
+            ((_ref19 = senders == null ? void 0 : senders.length) != null ? _ref19 : 0) > 1 ? /*#__PURE__*/ _jsxs(TextField, {
+                select: true,
+                label: "From",
+                value: (_ref20 = chosenSender == null ? void 0 : chosenSender.id) != null ? _ref20 : '',
+                onChange: (event)=>applySender(event.target.value),
+                size: "small",
+                helperText: "Which of this site’s senders this email goes out as",
+                children: [
+                    (senders != null ? senders : []).map((sender)=>{
+                        var _sender_from;
+                        return /*#__PURE__*/ _jsx(MenuItem, {
+                            value: sender.id,
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                spacing: 0,
+                                children: [
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "body2",
+                                        children: (_sender_from = sender.from) != null ? _sender_from : `${sender.localPart}@`
+                                    }),
+                                    sender.fromName || sender.isDefault ? /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "caption",
+                                        color: "text.secondary",
+                                        children: [
+                                            sender.fromName,
+                                            sender.isDefault ? 'this site’s default' : ''
+                                        ].filter(Boolean).join(' · ')
+                                    }) : null
+                                ]
+                            })
+                        }, sender.id);
+                    }),
+                    (identityView == null ? void 0 : identityView.canManage) && (identityView == null ? void 0 : identityView.selected) ? /*#__PURE__*/ _jsx(MenuItem, {
+                        value: ADD_SENDER_OPTION,
+                        children: /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "primary",
+                            children: 'Add a sender…'
+                        })
+                    }) : null
+                ]
+            }) : null,
+            (chosenSender == null ? void 0 : chosenSender.from) ? /*#__PURE__*/ _jsxs(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: [
+                    'This email goes out as ',
+                    /*#__PURE__*/ _jsx(Typography, {
+                        component: "span",
+                        variant: "body2",
+                        sx: {
+                            fontWeight: 'bold'
+                        },
+                        children: fromName.trim() ? `${fromName.trim()} <${chosenSender.from}>` : chosenSender.from
+                    }),
+                    replyTo.trim() ? `, with replies to ${replyTo.trim()}` : '',
+                    '.'
+                ]
+            }) : null,
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "From name",
+                        value: fromName,
+                        onChange: (event)=>setFromName(event.target.value),
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        },
+                        /*
+           * THE HELPER SAYS WHAT THIS FIELD IS OVERRIDING.
+           *
+           * The composer seeds both fields from the chosen sender, so the
+           * value sitting here on open is the SENDER'S — and a field that
+           * silently matches a setting somewhere else reads as a second
+           * definition of it. Saying which state it is in is what makes
+           * editing here read as "for this email" rather than as changing the
+           * site, which is the confusion two screens carrying the same two
+           * fields produce on their own.
+           */ helperText: senderFieldHelp('name', (_ref21 = chosenSender == null ? void 0 : chosenSender.fromName) != null ? _ref21 : '', fromName)
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Reply-to",
+                        value: replyTo,
+                        onChange: (event)=>setReplyTo(event.target.value),
+                        size: "small",
+                        type: "email",
+                        sx: {
+                            flex: 1
+                        },
+                        /*
+           * The one field here that may name a mailbox on a domain nobody has
+           * verified, and the helper says so — because the alternative is a
+           * merchant reaching for the From fields to be reachable at their
+           * own address. A `From:` on somebody else's mail provider cannot
+           * align under the strict DMARC policy the sending apex publishes,
+           * so it would be refused by the receiving side rather than
+           * delivered; a reply address carries no such requirement.
+           */ helperText: senderFieldHelp('reply address', (_ref22 = chosenSender == null ? void 0 : chosenSender.replyTo) != null ? _ref22 : '', replyTo)
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(TextField, {
+                label: "Preheader",
+                value: preheader,
+                onChange: (event)=>setPreheader(event.target.value),
+                size: "small",
+                helperText: "The preview line inboxes show after the subject"
+            }),
+            emailExperiments.length ? // Email A/B: variant subject/body overrides apply per recipient; a
+            // decided experiment sends the winner copy.
+            /*#__PURE__*/ _jsxs(TextField, {
+                select: true,
+                label: "A/B test",
+                value: experimentId,
+                onChange: (event)=>setExperimentId(event.target.value),
+                size: "small",
+                sx: {
+                    minWidth: 150
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "",
+                        children: 'None'
+                    }),
+                    emailExperiments.map((experiment)=>{
+                        var _experiment_name;
+                        return /*#__PURE__*/ _jsxs(MenuItem, {
+                            value: experiment.$id,
+                            children: [
+                                (_experiment_name = experiment.name) != null ? _experiment_name : experiment.$id,
+                                experiment.winnerVariantId ? ' (winner decided)' : ''
+                            ]
+                        }, experiment.$id);
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ _jsx(Divider, {}),
+            /*#__PURE__*/ _jsxs(TextField, {
+                select: true,
+                label: "How this email is written",
+                value: mode,
+                onChange: (event)=>setMode(event.target.value),
+                size: "small",
+                sx: {
+                    maxWidth: 360
+                },
+                helperText: designed ? 'The design is the message. Its plain-text half is generated ' + 'from it below, and can be written by hand instead.' : 'What you type is the message. Links in it are made clickable ' + 'for readers whose mail shows styling.',
+                children: [
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "design",
+                        children: 'Designed in the besigner'
+                    }),
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "text",
+                        children: 'Written here as plain text'
+                    })
+                ]
+            }),
+            designed ? /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs(TextField, {
+                        select: true,
+                        label: "Email design",
+                        value: templateScreenId,
+                        onChange: (event)=>setTemplateScreenId(event.target.value),
+                        size: "small",
+                        sx: {
+                            minWidth: 220
+                        },
+                        helperText: "This email's own design, or a saved template to reuse",
+                        children: [
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "",
+                                children: 'Choose a design…'
+                            }),
+                            emailScreens.map((screen)=>{
+                                var _screen_displayName;
+                                return /*#__PURE__*/ _jsx(MenuItem, {
+                                    value: screen.$id,
+                                    children: (_screen_displayName = screen.displayName) != null ? _screen_displayName : screen.$id
+                                }, screen.$id);
+                            })
+                        ]
+                    }),
+                    selectedTemplate ? /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        disabled: !orgSlug || !subdomain,
+                        onClick: ()=>void router.push(besignerHref(orgSlug, subdomain, selectedTemplate.$id, selectedTemplate.versionId)),
+                        children: 'Edit design'
+                    }) : null,
+                    /*#__PURE__*/ _jsx(CampaignDesignCreate, {
+                        hostId: hostId,
+                        name: (displayName == null ? void 0 : displayName.trim()) || subject.trim() || undefined,
+                        onCreated: (design)=>void handleDesignCreated(design),
+                        onError: handleDesignFailed
+                    })
+                ]
+            }) : null,
+            designed && templateScreenId ? /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 1,
+                children: [
+                    /*#__PURE__*/ _jsxs(TextField, {
+                        select: true,
+                        label: "Plain-text version",
+                        value: plainTextSource,
+                        onChange: (event)=>{
+                            const next = event.target.value;
+                            setPlainTextSource(next);
+                            // Start from what it replaces. An empty box would make an
+                            // override mean "write this email a second time".
+                            if (next === 'authored' && !plainText.trim()) {
+                                void adoptGeneratedText();
+                            }
+                        },
+                        size: "small",
+                        sx: {
+                            maxWidth: 360
+                        },
+                        helperText: plainTextSource === 'authored' ? 'What readers whose mail shows no styling receive.' : 'Taken from the design, and kept in step with it.',
+                        children: [
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "generated",
+                                children: 'Generated from the design'
+                            }),
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "authored",
+                                children: 'Written here'
+                            })
+                        ]
+                    }),
+                    plainTextState.stale ? /*#__PURE__*/ _jsx(Alert, {
+                        severity: "warning",
+                        action: /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            color: "inherit",
+                            disabled: adoptingText,
+                            onClick: ()=>void adoptGeneratedText(),
+                            children: adoptingText ? 'Reading…' : 'Take the design’s text'
+                        }),
+                        children: 'The design has been edited since this plain-text version was ' + 'written, so the two may no longer say the same thing. It is ' + 'left exactly as you wrote it — nothing has overwritten it — ' + 'and this is here because a text half that has fallen behind ' + 'is otherwise impossible to see.'
+                    }) : null,
+                    plainTextSource === 'authored' ? /*#__PURE__*/ _jsx(TextField, {
+                        label: "The plain-text message",
+                        value: plainText,
+                        onChange: (event)=>{
+                            var _ref;
+                            setPlainText(event.target.value);
+                            /*
+                 * Stamped on every edit: this text now describes the design as
+                 * it stands, which is what makes the notice above go away for
+                 * the right reason rather than because somebody dismissed it.
+                 */ setPlainTextVersionId((_ref = selectedTemplate == null ? void 0 : selectedTemplate.versionId) != null ? _ref : '');
+                        },
+                        size: "small",
+                        multiline: true,
+                        minRows: 4,
+                        helperText: adoptingText ? 'Reading the design’s own text…' : 'Merge tags resolve here too, and the unsubscribe link is ' + 'added as a plain address at the end.'
+                    }) : null,
+                    body.trim() && plainTextSource === 'generated' ? /*#__PURE__*/ _jsx(Alert, {
+                        severity: "info",
+                        action: /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            color: "inherit",
+                            onClick: ()=>{
+                                var _ref;
+                                setPlainTextSource('authored');
+                                setPlainText(body);
+                                setPlainTextVersionId((_ref = selectedTemplate == null ? void 0 : selectedTemplate.versionId) != null ? _ref : '');
+                            },
+                            children: 'Use it as the plain-text version'
+                        }),
+                        children: 'This email also carries a typed message. A designed email is ' + 'not sent from one, so it reaches nobody as it stands, and ' + 'saving or sending this email lets it go.'
+                    }) : null
+                ]
+            }) : null,
+            designed ? null : /*#__PURE__*/ _jsx(TextField, {
+                label: "Message",
+                value: body,
+                onChange: (event)=>setBody(event.target.value),
+                size: "small",
+                multiline: true,
+                minRows: 4
+            }),
+            designed ? null : /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'center',
+                    flexWrap: 'wrap'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "text.secondary",
+                        children: 'Personalize:'
+                    }),
+                    EMAIL_MERGE_TAGS.map((tag)=>/*#__PURE__*/ _jsx(Chip, {
+                            size: "small",
+                            variant: "outlined",
+                            label: tag.token,
+                            title: tag.description,
+                            onClick: ()=>setBody((current)=>current ? `${current}${tag.token}` : tag.token)
+                        }, tag.token)),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "text.secondary",
+                        children: '— resolved per recipient at send time'
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        onClick: ()=>setShowPreview((open)=>!open),
+                        children: showPreview ? 'Hide preview' : 'Preview email'
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "text.secondary",
+                        children: 'Rendered by the send path, personalized for your own account'
+                    })
+                ]
+            }),
+            showPreview ? rendered === null ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: 'Rendering…'
+            }) : 'error' in rendered ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "warning",
+                children: rendered.error
+            }) : /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 0.5,
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "text.secondary",
+                        children: `Subject: ${rendered.subject || '(none)'}`
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        component: "iframe",
+                        title: "Email preview",
+                        sandbox: "",
+                        srcDoc: rendered.html,
+                        sx: {
+                            width: '100%',
+                            height: 420,
+                            border: 1,
+                            borderColor: 'divider',
+                            borderRadius: 1,
+                            backgroundColor: 'background.paper'
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "overline",
+                        color: "text.secondary",
+                        children: 'Plain-text version, as it will send'
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        sx: {
+                            border: 1,
+                            borderColor: 'divider',
+                            borderRadius: 1,
+                            p: 1.5,
+                            maxHeight: 240,
+                            overflow: 'auto',
+                            backgroundColor: 'background.paper',
+                            fontFamily: 'monospace',
+                            fontSize: '0.8rem',
+                            whiteSpace: 'pre-wrap',
+                            wordBreak: 'break-word'
+                        },
+                        children: rendered.text || '(empty)'
+                    })
+                ]
+            }) : null,
+            preview && 'error' in preview && preview.blocking ? /*#__PURE__*/ _jsxs(Alert, {
+                severity: "warning",
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        sx: {
+                            fontWeight: 'bold'
+                        },
+                        children: 'This email cannot be sent yet'
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        children: preview.error
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        sx: {
+                            mt: 0.5
+                        },
+                        children: 'Nothing has been sent, and nothing about this draft is lost. ' + 'Emails → Sending is where this is settled — it says what this ' + 'site sends as and what it would take to change it.'
+                    })
+                ]
+            }) : preview && !('error' in preview) && preview.identity ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: preview.identity
+            }) : null,
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        color: "primary",
+                        disabled: busy || !subject.trim() || !messageReady || /*
+             * REFUSED BEFORE THE CLICK, not after it.
+             *
+             * The send would answer 409 anyway — that boundary holds whatever
+             * this component does. What a disabled button buys is that the
+             * merchant reads the reason instead of pressing Send and being
+             * told; the two are the same information, and only one of them
+             * arrives while there is still something to do about it.
+             */ Boolean(preview && 'error' in preview && preview.blocking),
+                        onClick: handleSend,
+                        children: busy ? 'Working…' : sendAt ? 'Schedule campaign' : 'Send campaign'
+                    }),
+                    campaignId ? /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        variant: "outlined",
+                        disabled: saving || busy,
+                        onClick: ()=>void handleSaveDraft(),
+                        children: saving ? 'Saving…' : 'Save draft'
+                    }) : null,
+                    /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        disabled: busy || !messageReady,
+                        onClick: ()=>setTestOpen(true),
+                        children: 'Send test'
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        type: "datetime-local",
+                        label: "Send at (optional)",
+                        slotProps: {
+                            inputLabel: {
+                                shrink: true
+                            }
+                        },
+                        value: sendAt,
+                        onChange: (event)=>setSendAt(event.target.value)
+                    })
+                ]
+            }),
+            addingSender ? /*#__PURE__*/ _jsx(CampaignSenderEditor, {
+                hostId: hostId,
+                view: identityView,
+                onClose: ()=>setAddingSender(false),
+                onSaved: (created)=>{
+                    /*
+             * The new row is selected by the read, not here: it does not exist
+             * in `senders` yet, because the list this picker draws from was
+             * fetched before the drawer wrote anything.
+             */ if (created) pendingSenderRef.current = created;
+                    setIdentityReads((count)=>count + 1);
+                }
+            }) : null,
+            /*#__PURE__*/ _jsx(CampaignTestSendDrawer, {
+                open: testOpen,
+                onClose: ()=>setTestOpen(false),
+                post: authorizedPost,
+                identity: preview && !('error' in preview) ? preview.identity : '',
+                message: _extends({
+                    subject: subject.trim() || 'Test send',
+                    /*
+           * The mode's own field, exactly as the send carries it. A proof
+           * assembled from both halves would mail something the campaign
+           * cannot produce, which is the one thing a proof must never do.
+           */ body: sentBody,
+                    fromName: fromName.trim(),
+                    replyTo: replyTo.trim()
+                }, senderId ? {
+                    senderId
+                } : {}, {
+                    preheader: preheader.trim()
+                }, sentTemplateScreenId ? {
+                    templateScreenId: sentTemplateScreenId
+                } : {}, sentPlainText ? {
+                    plainText: sentPlainText
+                } : {}, sendingIdentity ? {
+                    sendingIdentity
+                } : {})
+            })
+        ]
+    });
+}
+CampaignComposer.displayName = 'CampaignComposer';
+export default CampaignComposer;
+
+//# sourceMappingURL=campaign-composer.js.map