@aglyn/plugins-outreach 1.0.0-beta.218 → 1.0.0-beta.220

package/src/lib/components/sequence-editor.js

@@ -21,11 +21,11 @@ import { pluginDocsHelp } from "@aglyn/aglyn";
 import { consentGroupForHost } from "@aglyn/aglyn/app-utils/consent-groups";
 import { mdiPlus } from "@aglyn/shared-data-mdi";
 import { CardDisplay, MdiIcon } from "@aglyn/shared-ui-jsx";
-import CampaignPicker from "@aglyn/shared-ui-email-campaigns/components/campaign-picker.component";
+import ContainerPicker from "@aglyn/tenant-feature-instance/components/container-picker";
 import { useSnackbar } from "@aglyn/shared-ui-snackstack";
-import { useOrgCampaigns, useUser } from "@aglyn/tenant-feature-instance";
+import { useOrgContainerOptions, useUser } from "@aglyn/tenant-feature-instance";
 import { Alert, Autocomplete, Box, Button, Chip, FormControlLabel, Grid, Menu, MenuItem, Stack, Switch, TextField, Typography } from "@mui/material";
-import { useEffect, useMemo, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { isInThreadEmailStep, OUTREACH_SEQUENCE_NAME_MAX, validateOutreachSequence } from "../engine/sequence-validation.js";
 import { outreachCountryLabel } from "../model/compliance-settings.js";
 import { OUTREACH_MAX_EMAIL_STEPS, OUTREACH_MAX_STEPS, OUTREACH_TASK_KIND_LABELS, OUTREACH_TASK_KINDS } from "../model/outreach.types.js";
@@ -47,6 +47,406 @@ import { useOutreachEmailTemplates } from "./use-outreach-crm.js";
         field: field === 'id' ? 'step' : field
     };
 }
+/**
+ * The countries a sequence sends to, as chips in an Autocomplete.
+ *
+ * MEMOIZED, AND EVERY PROP IT TAKES IS STABLE WHILE THE COUNTRIES ARE
+ * (AGL-3423). A multiple Autocomplete hands its input a new chip array as
+ * `startAdornment` on every render, and MUI's `InputBase` copies that into
+ * its `FormControl` from a passive effect — a state update after every
+ * commit this field takes part in. React 19 counts a commit that leaves such
+ * an update pending as a nested update, and keystrokes the browser delivers
+ * back to back (a held key, fast typing on a busy page) commit one after
+ * another with nothing in between to clear the count: fifty-one of them and
+ * the next keystroke's own `setState` throws "Maximum update depth exceeded"
+ * (minified error #185), which is what typing a step's body reported. Kept
+ * out of the editor's other renders, the field commits only when the
+ * countries, their options or their issue change.
+ */ const OutreachCountriesField = /*#__PURE__*/ memo(function OutreachCountriesField(props) {
+    return /*#__PURE__*/ _jsx(Autocomplete, {
+        multiple: true,
+        options: props.options,
+        value: props.value,
+        getOptionLabel: outreachCountryLabel,
+        onChange: (_event, next)=>props.onChange(next),
+        disabled: props.disabled,
+        renderValue: (value, getItemProps)=>value.map((code, index)=>{
+                const _getItemProps = getItemProps({
+                    index
+                }), { key } = _getItemProps, item = _object_without_properties_loose(_getItemProps, [
+                    "key"
+                ]);
+                return /*#__PURE__*/ _jsx(Chip, _extends({
+                    size: "small",
+                    label: outreachCountryLabel(code)
+                }, item), key);
+            }),
+        renderInput: (params)=>{
+            var _props_issue;
+            return /*#__PURE__*/ _jsx(TextField, _extends({}, params, {
+                label: "Countries",
+                error: Boolean(props.issue),
+                helperText: (_props_issue = props.issue) != null ? _props_issue : 'Among the countries your organization allows. Cold contacts are emailed only in the United States.'
+            }));
+        }
+    });
+});
+/**
+ * Each step's issues, the SAME record for a step while what it holds reads
+ * the same (AGL-3423), so a step a keystroke did not touch keeps its props.
+ */ function useStepIssues(issues, count) {
+    const held = useRef([]);
+    return useMemo(()=>{
+        const found = Array.from({
+            length: count
+        }, ()=>({}));
+        for (const issue of issues){
+            const key = stepIssueKey(issue.path);
+            const record = key ? found[key.index] : undefined;
+            if (key && record && !record[key.field]) record[key.field] = issue.message;
+        }
+        held.current = found.map((value, index)=>{
+            const key = JSON.stringify(value);
+            const before = held.current[index];
+            return (before == null ? void 0 : before.key) === key ? before : {
+                key,
+                value
+            };
+        });
+        return held.current.map((entry)=>entry.value);
+    }, [
+        issues,
+        count
+    ]);
+}
+/** A text field that redraws only when what it shows changes (AGL-3423). */ const MemoTextField = /*#__PURE__*/ memo(TextField);
+/*
+ * The sections below are drawn from the one draft, and each redraws only
+ * when what it shows changes (AGL-3423).
+ */ const MemoMailboxPicker = /*#__PURE__*/ memo(OutreachSequenceMailboxPicker);
+const MemoContainerPicker = /*#__PURE__*/ memo(ContainerPicker);
+const MemoSendWindowFields = /*#__PURE__*/ memo(OutreachSendWindowFields);
+const MemoSequencePreview = /*#__PURE__*/ memo(OutreachSequencePreview);
+const NAME_SLOT_PROPS = {
+    htmlInput: {
+        maxLength: OUTREACH_SEQUENCE_NAME_MAX + 20
+    }
+};
+const ADD_STEP_ROW = {
+    flexWrap: 'wrap',
+    rowGap: 1
+};
+const PREVIEW_COLUMN = {
+    position: {
+        md: 'sticky'
+    },
+    top: {
+        md: 16
+    }
+};
+const SequenceSiteField = /*#__PURE__*/ memo(function SequenceSiteField(props) {
+    const { hosts, value, issue } = props;
+    return /*#__PURE__*/ _jsx(TextField, {
+        select: true,
+        label: "Site",
+        value: hosts.some((host)=>host.id === value) ? value : '',
+        onChange: props.onChange,
+        disabled: props.disabled || !hosts.length,
+        error: Boolean(issue),
+        helperText: issue != null ? issue : 'The site whose contacts this sequence emails.',
+        fullWidth: true,
+        children: hosts.map((host)=>/*#__PURE__*/ _jsx(MenuItem, {
+                value: host.id,
+                children: host.name
+            }, host.id))
+    });
+});
+/** The sequence card's header actions: Cancel, and the save of the whole sequence. */ const SequenceSaveActions = /*#__PURE__*/ memo(function SequenceSaveActions(props) {
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        children: [
+            props.onCancel ? /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                variant: "text",
+                onClick: props.onCancel,
+                disabled: props.saving,
+                children: "Cancel"
+            }) : null,
+            /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                variant: "contained",
+                onClick: props.onSave,
+                disabled: props.saving,
+                children: props.saving ? 'Saving…' : props.saveLabel
+            })
+        ]
+    });
+});
+/** The sequence's own card: its name, site, mailbox and campaigns. */ const SequenceCard = /*#__PURE__*/ memo(function SequenceCard(props) {
+    var _props_campaignsIssue;
+    const { archived } = props;
+    return /*#__PURE__*/ _jsx(CardDisplay, {
+        header: "Sequence",
+        help: pluginDocsHelp('sequences', {
+            anchor: '#build-a-sequence'
+        }),
+        // The whole sequence (steps and sending rules included) saves
+        // from its first card's header, where the console puts a card's
+        // actions (AGL-3333).
+        HeaderProps: {
+            action: archived ? undefined : /*#__PURE__*/ _jsx(SequenceSaveActions, {
+                saving: props.saving,
+                saveLabel: props.saveLabel,
+                onCancel: props.onCancel,
+                onSave: props.onSave
+            })
+        },
+        contentGutterX: true,
+        contentGutterY: true,
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 2,
+            children: [
+                /*#__PURE__*/ _jsx(MemoTextField, {
+                    label: "Name",
+                    value: props.name,
+                    onChange: props.onName,
+                    disabled: archived,
+                    error: Boolean(props.nameIssue),
+                    helperText: props.nameIssue,
+                    slotProps: NAME_SLOT_PROPS,
+                    fullWidth: true
+                }),
+                /*#__PURE__*/ _jsx(SequenceSiteField, {
+                    hosts: props.hosts,
+                    value: props.hostId,
+                    issue: props.hostIssue,
+                    disabled: archived,
+                    onChange: props.onHost
+                }),
+                /*#__PURE__*/ _jsx(MemoMailboxPicker, {
+                    orgId: props.orgId,
+                    uid: props.uid,
+                    mailboxes: props.mailboxes,
+                    mailboxesPath: props.mailboxesPath,
+                    value: props.mailboxId,
+                    onChange: props.onMailbox,
+                    error: props.mailboxIssue,
+                    disabled: archived
+                }),
+                /*#__PURE__*/ _jsx(MemoContainerPicker, {
+                    kind: "campaign",
+                    options: props.campaignOptions,
+                    value: props.campaignIds,
+                    onChange: props.onCampaigns,
+                    label: "Campaigns",
+                    helperText: (_props_campaignsIssue = props.campaignsIssue) != null ? _props_campaignsIssue : 'The campaigns this sequence is part of. Everyone enrolled joins them, and its sends, replies, meetings and conversions count on their pages.',
+                    disabled: archived,
+                    empty: props.noCampaigns,
+                    emptyText: "There are no campaigns yet. Create one from Marketing to file this sequence under it."
+                })
+            ]
+        })
+    });
+});
+/**
+ * One step's card, bound to its position. Memoized, with handlers that keep
+ * their identity, so a keystroke in one step leaves the others undrawn.
+ */ const SequenceStepItem = /*#__PURE__*/ memo(function SequenceStepItem(props) {
+    const { index, canSendTest, onStepChange, onStepMove, onStepRemove, onStepTest } = props, card = _object_without_properties_loose(props, [
+        "index",
+        "canSendTest",
+        "onStepChange",
+        "onStepMove",
+        "onStepRemove",
+        "onStepTest"
+    ]);
+    const onChange = useCallback((step)=>onStepChange(index, step), [
+        index,
+        onStepChange
+    ]);
+    const onMove = useCallback((direction)=>onStepMove(index, direction), [
+        index,
+        onStepMove
+    ]);
+    const onRemove = useCallback(()=>onStepRemove(index), [
+        index,
+        onStepRemove
+    ]);
+    const onSendTest = useCallback(()=>onStepTest(index), [
+        index,
+        onStepTest
+    ]);
+    return /*#__PURE__*/ _jsx(OutreachStepCard, _extends({}, card, {
+        index: index,
+        onChange: onChange,
+        onMove: onMove,
+        onRemove: onRemove,
+        onSendTest: canSendTest ? onSendTest : undefined
+    }));
+});
+/** Adds an email, or a task of a kind picked from its menu. */ const SequenceAddStep = /*#__PURE__*/ memo(function SequenceAddStep(props) {
+    const { onAddTask } = props;
+    const [taskAnchor, setTaskAnchor] = useState(null);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        sx: ADD_STEP_ROW,
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                variant: "outlined",
+                startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiPlus.path,
+                    fontSize: "small"
+                }),
+                disabled: props.emailDisabled,
+                onClick: props.onAddEmail,
+                children: "Add email"
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                variant: "outlined",
+                startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiPlus.path,
+                    fontSize: "small"
+                }),
+                disabled: props.taskDisabled,
+                onClick: (event)=>setTaskAnchor(event.currentTarget),
+                "aria-haspopup": "menu",
+                children: "Add task"
+            }),
+            /*#__PURE__*/ _jsx(Menu, {
+                anchorEl: taskAnchor,
+                open: Boolean(taskAnchor),
+                onClose: ()=>setTaskAnchor(null),
+                children: OUTREACH_TASK_KINDS.map((kind)=>/*#__PURE__*/ _jsx(MenuItem, {
+                        onClick: ()=>{
+                            setTaskAnchor(null);
+                            onAddTask(kind);
+                        },
+                        children: OUTREACH_TASK_KIND_LABELS[kind]
+                    }, kind))
+            })
+        ]
+    });
+});
+/** Who the sequence sends to, and when: its countries, switches and hours. */ const SequenceSendingCard = /*#__PURE__*/ memo(function SequenceSendingCard(props) {
+    const { settings, disabled, onSettings } = props;
+    const setAllowCustomers = useCallback((event)=>onSettings({
+            allowCustomers: event.target.checked
+        }), [
+        onSettings
+    ]);
+    const setTrackClicks = useCallback((event)=>onSettings({
+            trackClicks: event.target.checked
+        }), [
+        onSettings
+    ]);
+    const setCountOpens = useCallback((event)=>onSettings({
+            countOpens: event.target.checked
+        }), [
+        onSettings
+    ]);
+    const setListUnsubscribe = useCallback((event)=>onSettings({
+            listUnsubscribe: event.target.checked
+        }), [
+        onSettings
+    ]);
+    const setWindow = useCallback((window)=>onSettings({
+            window
+        }), [
+        onSettings
+    ]);
+    return /*#__PURE__*/ _jsx(CardDisplay, {
+        header: "Who it sends to, and when",
+        help: pluginDocsHelp('sequences', {
+            anchor: '#build-a-sequence',
+            excerpt: 'A sequence sends only to the countries both it and your organization allow, and in its mailbox’s sending hours unless it has its own.'
+        }),
+        contentGutterX: true,
+        contentGutterY: true,
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 2,
+            children: [
+                /*#__PURE__*/ _jsx(OutreachCountriesField, {
+                    options: props.countryOptions,
+                    value: settings.allowedCountries,
+                    onChange: props.onCountries,
+                    issue: props.countriesIssue,
+                    disabled: disabled
+                }),
+                /*#__PURE__*/ _jsx(FormControlLabel, {
+                    control: /*#__PURE__*/ _jsx(Switch, {
+                        checked: settings.allowCustomers,
+                        onChange: setAllowCustomers,
+                        disabled: disabled
+                    }),
+                    label: "Include customers"
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 0,
+                    children: [
+                        /*#__PURE__*/ _jsx(FormControlLabel, {
+                            control: /*#__PURE__*/ _jsx(Switch, {
+                                checked: settings.trackClicks,
+                                onChange: setTrackClicks,
+                                disabled: disabled
+                            }),
+                            label: "Count link clicks"
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "text.secondary",
+                            children: "Links in these emails are replaced with links of ours that forward to the same page, so clicks can be counted. The recipient sees the replacement, not your address. The emails stay plain text."
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 0,
+                    children: [
+                        /*#__PURE__*/ _jsx(FormControlLabel, {
+                            control: /*#__PURE__*/ _jsx(Switch, {
+                                checked: settings.countOpens,
+                                onChange: setCountOpens,
+                                disabled: disabled
+                            }),
+                            label: "Count opens"
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "text.secondary",
+                            children: "Each email also goes out as HTML — the same words — with a tiny tracking image, so opens can be counted. The plain-text version is unchanged. It makes the email look less like one written by hand, and some spam filters score HTML with a remote image against you, so turn it on to measure a slice of your sends rather than for every sequence. Gmail opens count; Apple Mail loads every image on arrival, so its loads are counted separately."
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 0,
+                    children: [
+                        /*#__PURE__*/ _jsx(FormControlLabel, {
+                            control: /*#__PURE__*/ _jsx(Switch, {
+                                checked: settings.listUnsubscribe,
+                                onChange: setListUnsubscribe,
+                                disabled: disabled
+                            }),
+                            label: "Add a mail-client unsubscribe button"
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "text.secondary",
+                            children: "Adds the List-Unsubscribe header, so the recipient’s mail app shows its own Unsubscribe button. It’s the easiest way out for them, and fewer people mark you as spam when they have it, but mail apps then label the email as coming from a mailing list. Off, the footer’s “reply ‘no’” line is the way out, and it’s always there."
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(MemoSendWindowFields, {
+                    window: settings.window,
+                    onChange: setWindow,
+                    daysIssue: props.daysIssue,
+                    hoursIssue: props.hoursIssue,
+                    disabled: disabled
+                })
+            ]
+        })
+    });
+});
 /**
  * The sequence editor (AGL-2980): the name, the site and mailbox, the steps,
  * who it sends to and when, beside a live preview of each email.
@@ -57,8 +457,21 @@ import { useOutreachEmailTemplates } from "./use-outreach-crm.js";
  * judge (whose mailbox, which countries the organization allows, what may
  * no longer change once people are enrolled) comes back from the save and
  * is shown in the same places.
+ *
+ * ## A keystroke redraws its own field (AGL-3423)
+ *
+ * The whole sequence is one draft, so every letter typed anywhere is a new
+ * draft, and drawing the editor from it inline redrew every field of every
+ * step, the settings and the preview with each one: 17 inputs and some 1,150
+ * components for one letter in a three-step sequence. That cost is what lets
+ * typed input queue, and queued keystrokes processed back to back are what
+ * drove the countries chips into React's #185. The sequence card, each step,
+ * the sending card and the preview are memoized and handed only what they
+ * show, through handlers that keep their identity; the handlers that wrote
+ * from the draft as drawn still do, through `drawn`. A letter now redraws the
+ * field it lands in, and the preview when it shows that step's email.
  */ export function OutreachSequenceEditor(props) {
-    var _ref, _ref1, _props_mailboxes_mailboxes_find, _ref2, _issueAt, _issueAt1, _props_org, _ref3;
+    var _ref, _props_mailboxes_mailboxes_find, _ref1, _props_org, _ref2;
     var _settings_settings, _settings_settings1, _issues_find, _hosts_find;
     const { orgId, orgMount, sequence, settings } = props;
     const api = useOutreachApi(orgId);
@@ -69,9 +482,12 @@ import { useOutreachEmailTemplates } from "./use-outreach-crm.js";
     const hosts = useMemo(()=>mountedHosts != null ? mountedHosts : [], [
         mountedHosts
     ]);
-    const orgCountries = (_ref1 = (_settings_settings = settings.settings) == null ? void 0 : _settings_settings.allowedCountries) != null ? _ref1 : [
-        'US'
-    ];
+    const allowedCountries = (_settings_settings = settings.settings) == null ? void 0 : _settings_settings.allowedCountries;
+    const orgCountries = useMemo(()=>allowedCountries != null ? allowedCountries : [
+            'US'
+        ], [
+        allowedCountries
+    ]);
     const [draft, setDraft] = useState(()=>sequence ? outreachSequenceDraftOf(sequence) : emptyOutreachSequenceDraft({
             hostId: hosts.length === 1 ? hosts[0].id : '',
             allowedCountries: orgCountries
@@ -79,9 +495,11 @@ import { useOutreachEmailTemplates } from "./use-outreach-crm.js";
     const [attempted, setAttempted] = useState(false);
     const [serverIssues, setServerIssues] = useState([]);
     const [saving, setSaving] = useState(false);
-    const [taskAnchor, setTaskAnchor] = useState(null);
     // The step whose test-send dialog is open (AGL-3325), by index.
     const [testing, setTesting] = useState(null);
+    // The draft as last drawn, which the handlers that build on it read.
+    const drawn = useRef(draft);
+    drawn.current = draft;
     // A stored sequence the listener updated (a save, a status change) is the
     // new starting point.
     useEffect(()=>{
@@ -127,13 +545,19 @@ import { useOutreachEmailTemplates } from "./use-outreach-crm.js";
     ]);
     const templates = useOutreachEmailTemplates(orgId, draft.hostId || null, uid);
     const mailbox = (_props_mailboxes_mailboxes_find = props.mailboxes.mailboxes.find((entry)=>entry.id === draft.mailboxId)) != null ? _props_mailboxes_mailboxes_find : null;
+    const sender = useMemo(()=>mailbox ? {
+            name: mailbox.displayName,
+            email: mailbox.sendAs || mailbox.email
+        } : null, [
+        mailbox
+    ]);
     const archived = (sequence == null ? void 0 : sequence.status) === 'archived';
     /*
    * The org's campaigns, for the picker (AGL-3254): read while the editor
    * is open. A sequence is the organization's record and so is a campaign,
    * so the choice is every campaign in the org, whichever site the
    * sequence sends as.
-   */ const campaigns = useOrgCampaigns(orgId, {
+   */ const campaigns = useOrgContainerOptions('campaign', orgId, {
         enabled: true
     });
     const issues = useMemo(()=>{
@@ -151,35 +575,96 @@ import { useOutreachEmailTemplates } from "./use-outreach-crm.js";
         var _issues_find;
         return (_issues_find = issues.find((issue)=>issue.path === path)) == null ? void 0 : _issues_find.message;
     };
-    const stepIssues = (index)=>{
-        const found = {};
-        for (const issue of issues){
-            const key = stepIssueKey(issue.path);
-            if ((key == null ? void 0 : key.index) === index && !found[key.field]) found[key.field] = issue.message;
-        }
-        return found;
-    };
+    const stepIssues = useStepIssues(issues, draft.steps.length);
     const listIssue = issueAt('steps');
     const countriesIssue = (_issues_find = issues.find((issue)=>issue.path.startsWith('settings.allowedCountries'))) == null ? void 0 : _issues_find.message;
-    const update = (next)=>{
-        setServerIssues([]);
+    // An edit clears what the last save refused. The empty list stays the same
+    // list, so an edit with nothing to clear does not change that state.
+    const clearServerIssues = useCallback(()=>setServerIssues((previous)=>previous.length ? [] : previous), []);
+    const update = useCallback((next)=>{
+        clearServerIssues();
         setDraft((previous)=>_extends({}, previous, next));
-    };
-    const setStep = (index, step)=>update({
-            steps: draft.steps.map((entry, position)=>position === index ? step : entry)
-        });
-    const moveStep = (index, direction)=>{
+    }, [
+        clearServerIssues
+    ]);
+    // Stable, for the memoized countries field: it reads the settings it
+    // replaces from the draft it is given rather than from this render's.
+    const setCountries = useCallback((next)=>{
+        clearServerIssues();
+        setDraft((previous)=>_extends({}, previous, {
+                settings: _extends({}, previous.settings, {
+                    allowedCountries: next
+                })
+            }));
+    }, [
+        clearServerIssues
+    ]);
+    const setName = useCallback((event)=>update({
+            name: event.target.value
+        }), [
+        update
+    ]);
+    const setHost = useCallback((event)=>update({
+            hostId: event.target.value
+        }), [
+        update
+    ]);
+    const setMailbox = useCallback((mailboxId)=>update({
+            mailboxId
+        }), [
+        update
+    ]);
+    const setCampaigns = useCallback((campaignIds)=>update({
+            campaignIds
+        }), [
+        update
+    ]);
+    const setSettings = useCallback((patch)=>update({
+            settings: _extends({}, drawn.current.settings, patch)
+        }), [
+        update
+    ]);
+    const setStep = useCallback((index, step)=>update({
+            steps: drawn.current.steps.map((entry, position)=>position === index ? step : entry)
+        }), [
+        update
+    ]);
+    const moveStep = useCallback((index, direction)=>{
         const steps = [
-            ...draft.steps
+            ...drawn.current.steps
         ];
         const [moved] = steps.splice(index, 1);
         steps.splice(index + direction, 0, moved);
         update({
             steps
         });
-    };
+    }, [
+        update
+    ]);
+    const removeStep = useCallback((index)=>update({
+            steps: drawn.current.steps.filter((_entry, position)=>position !== index)
+        }), [
+        update
+    ]);
+    const addEmail = useCallback(()=>update({
+            steps: [
+                ...drawn.current.steps,
+                newOutreachEmailStep(drawn.current.steps)
+            ]
+        }), [
+        update
+    ]);
+    const addTask = useCallback((kind)=>update({
+            steps: [
+                ...drawn.current.steps,
+                newOutreachTaskStep(drawn.current.steps, kind)
+            ]
+        }), [
+        update
+    ]);
     const emailCount = draft.steps.filter((step)=>step.kind === 'email').length;
     const full = draft.steps.length >= OUTREACH_MAX_STEPS;
+    const firstEmail = draft.steps.findIndex((entry)=>entry.kind === 'email');
     const threadSubject = (index)=>{
         for(let position = index - 1; position >= 0; position -= 1){
             const step = draft.steps[position];
@@ -212,13 +697,21 @@ import { useOutreachEmailTemplates } from "./use-outreach-crm.js";
             setSaving(false);
         }
     };
-    const siteName = (_ref2 = (_hosts_find = hosts.find((host)=>host.id === draft.hostId)) == null ? void 0 : _hosts_find.name) != null ? _ref2 : '';
-    const countryOptions = [
-        ...new Set([
-            ...orgCountries,
-            ...draft.settings.allowedCountries
-        ])
-    ];
+    // The save as last drawn, behind a handler that keeps its identity.
+    const drawnSave = useRef(save);
+    drawnSave.current = save;
+    const onSave = useCallback(()=>void drawnSave.current(), []);
+    const siteName = (_ref1 = (_hosts_find = hosts.find((host)=>host.id === draft.hostId)) == null ? void 0 : _hosts_find.name) != null ? _ref1 : '';
+    const draftCountries = draft.settings.allowedCountries;
+    const countryOptions = useMemo(()=>[
+            ...new Set([
+                ...orgCountries,
+                ...draftCountries
+            ])
+        ], [
+        orgCountries,
+        draftCountries
+    ]);
     /*
    * A test sends the step as STORED (AGL-3325): the route reads the saved
    * sequence, so a new one has nothing to send yet and an edited one sends
@@ -242,310 +735,78 @@ import { useOutreachEmailTemplates } from "./use-outreach-crm.js";
                             severity: "info",
                             children: "This sequence is archived, so it can’t be edited."
                         }) : null,
-                        /*#__PURE__*/ _jsx(CardDisplay, {
-                            header: "Sequence",
-                            help: pluginDocsHelp('sequences', {
-                                anchor: '#build-a-sequence'
-                            }),
-                            // The whole sequence (steps and sending rules included) saves
-                            // from its first card's header, where the console puts a card's
-                            // actions (AGL-3333).
-                            HeaderProps: {
-                                action: archived ? undefined : /*#__PURE__*/ _jsxs(Stack, {
-                                    direction: "row",
-                                    spacing: 1,
-                                    children: [
-                                        props.onCancel ? /*#__PURE__*/ _jsx(Button, {
-                                            size: "small",
-                                            variant: "text",
-                                            onClick: props.onCancel,
-                                            disabled: saving,
-                                            children: "Cancel"
-                                        }) : null,
-                                        /*#__PURE__*/ _jsx(Button, {
-                                            size: "small",
-                                            variant: "contained",
-                                            onClick: ()=>void save(),
-                                            disabled: saving,
-                                            children: saving ? 'Saving…' : sequence ? 'Save' : 'Create sequence'
-                                        })
-                                    ]
-                                })
-                            },
-                            contentGutterX: true,
-                            contentGutterY: true,
-                            children: /*#__PURE__*/ _jsxs(Stack, {
-                                spacing: 2,
-                                children: [
-                                    /*#__PURE__*/ _jsx(TextField, {
-                                        label: "Name",
-                                        value: draft.name,
-                                        onChange: (event)=>update({
-                                                name: event.target.value
-                                            }),
-                                        disabled: archived,
-                                        error: Boolean(issueAt('name')),
-                                        helperText: issueAt('name'),
-                                        slotProps: {
-                                            htmlInput: {
-                                                maxLength: OUTREACH_SEQUENCE_NAME_MAX + 20
-                                            }
-                                        },
-                                        fullWidth: true
-                                    }),
-                                    /*#__PURE__*/ _jsx(TextField, {
-                                        select: true,
-                                        label: "Site",
-                                        value: hosts.some((host)=>host.id === draft.hostId) ? draft.hostId : '',
-                                        onChange: (event)=>update({
-                                                hostId: event.target.value
-                                            }),
-                                        disabled: archived || !hosts.length,
-                                        error: Boolean(issueAt('hostId')),
-                                        helperText: (_issueAt = issueAt('hostId')) != null ? _issueAt : 'The site whose contacts this sequence emails.',
-                                        fullWidth: true,
-                                        children: hosts.map((host)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                                value: host.id,
-                                                children: host.name
-                                            }, host.id))
-                                    }),
-                                    /*#__PURE__*/ _jsx(OutreachSequenceMailboxPicker, {
-                                        orgId: orgId,
-                                        uid: uid,
-                                        mailboxes: props.mailboxes,
-                                        mailboxesPath: props.mailboxesPath,
-                                        value: draft.mailboxId,
-                                        onChange: (mailboxId)=>update({
-                                                mailboxId
-                                            }),
-                                        error: issueAt('mailboxId'),
-                                        disabled: archived
-                                    }),
-                                    /*#__PURE__*/ _jsx(CampaignPicker, {
-                                        options: campaigns.options,
-                                        value: draft.campaignIds,
-                                        onChange: (campaignIds)=>update({
-                                                campaignIds
-                                            }),
-                                        label: "Campaigns",
-                                        helperText: (_issueAt1 = issueAt('campaignIds')) != null ? _issueAt1 : 'The campaigns this sequence is part of. Everyone enrolled joins them, and its sends, replies, meetings and conversions count on their pages.',
-                                        disabled: archived,
-                                        empty: campaigns.ready && !campaigns.options.length,
-                                        emptyText: "There are no campaigns yet. Create one from Marketing to file this sequence under it."
-                                    })
-                                ]
-                            })
+                        /*#__PURE__*/ _jsx(SequenceCard, {
+                            orgId: orgId,
+                            uid: uid,
+                            name: draft.name,
+                            hostId: draft.hostId,
+                            mailboxId: draft.mailboxId,
+                            campaignIds: draft.campaignIds,
+                            hosts: hosts,
+                            mailboxes: props.mailboxes,
+                            mailboxesPath: props.mailboxesPath,
+                            campaignOptions: campaigns.options,
+                            noCampaigns: campaigns.ready && !campaigns.options.length,
+                            nameIssue: issueAt('name'),
+                            hostIssue: issueAt('hostId'),
+                            mailboxIssue: issueAt('mailboxId'),
+                            campaignsIssue: issueAt('campaignIds'),
+                            archived: archived,
+                            saving: saving,
+                            saveLabel: sequence ? 'Save' : 'Create sequence',
+                            onCancel: props.onCancel,
+                            onSave: onSave,
+                            onName: setName,
+                            onHost: setHost,
+                            onMailbox: setMailbox,
+                            onCampaigns: setCampaigns
                         }),
                         listIssue ? /*#__PURE__*/ _jsx(Alert, {
                             severity: "error",
                             children: listIssue
                         }) : null,
-                        draft.steps.map((step, index)=>/*#__PURE__*/ _jsx(OutreachStepCard, {
+                        draft.steps.map((step, index)=>{
+                            const inThread = isInThreadEmailStep(draft.steps, index);
+                            return /*#__PURE__*/ _jsx(SequenceStepItem, {
                                 step: step,
                                 index: index,
                                 count: draft.steps.length,
-                                firstEmail: draft.steps.findIndex((entry)=>entry.kind === 'email') === index,
-                                inThread: isInThreadEmailStep(draft.steps, index),
-                                threadSubject: threadSubject(index),
+                                firstEmail: firstEmail === index,
+                                inThread: inThread,
+                                // Read only by an email sent in the thread, so no other
+                                // step is redrawn as the subject it replies to is typed.
+                                threadSubject: inThread ? threadSubject(index) : '',
                                 templates: templates.data,
-                                issues: stepIssues(index),
+                                issues: stepIssues[index],
                                 disabled: archived,
-                                onChange: (next)=>setStep(index, next),
-                                onMove: (direction)=>moveStep(index, direction),
-                                onRemove: ()=>update({
-                                        steps: draft.steps.filter((_entry, position)=>position !== index)
-                                    }),
-                                onSendTest: step.kind === 'email' && !archived ? ()=>setTesting(index) : undefined,
-                                sendTestDisabledReason: sendTestDisabledReason
-                            }, step.id || `step-${index}`)),
-                        /*#__PURE__*/ _jsxs(Stack, {
-                            direction: "row",
-                            spacing: 1,
-                            sx: {
-                                flexWrap: 'wrap',
-                                rowGap: 1
-                            },
-                            children: [
-                                /*#__PURE__*/ _jsx(Button, {
-                                    variant: "outlined",
-                                    startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
-                                        path: mdiPlus.path,
-                                        fontSize: "small"
-                                    }),
-                                    disabled: archived || full || emailCount >= OUTREACH_MAX_EMAIL_STEPS,
-                                    onClick: ()=>update({
-                                            steps: [
-                                                ...draft.steps,
-                                                newOutreachEmailStep(draft.steps)
-                                            ]
-                                        }),
-                                    children: "Add email"
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    variant: "outlined",
-                                    startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
-                                        path: mdiPlus.path,
-                                        fontSize: "small"
-                                    }),
-                                    disabled: archived || full,
-                                    onClick: (event)=>setTaskAnchor(event.currentTarget),
-                                    "aria-haspopup": "menu",
-                                    children: "Add task"
-                                }),
-                                /*#__PURE__*/ _jsx(Menu, {
-                                    anchorEl: taskAnchor,
-                                    open: Boolean(taskAnchor),
-                                    onClose: ()=>setTaskAnchor(null),
-                                    children: OUTREACH_TASK_KINDS.map((kind)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                            onClick: ()=>{
-                                                setTaskAnchor(null);
-                                                update({
-                                                    steps: [
-                                                        ...draft.steps,
-                                                        newOutreachTaskStep(draft.steps, kind)
-                                                    ]
-                                                });
-                                            },
-                                            children: OUTREACH_TASK_KIND_LABELS[kind]
-                                        }, kind))
-                                })
-                            ]
+                                canSendTest: step.kind === 'email' && !archived,
+                                sendTestDisabledReason: sendTestDisabledReason,
+                                onStepChange: setStep,
+                                onStepMove: moveStep,
+                                onStepRemove: removeStep,
+                                onStepTest: setTesting
+                            }, step.id || `step-${index}`);
+                        }),
+                        /*#__PURE__*/ _jsx(SequenceAddStep, {
+                            emailDisabled: archived || full || emailCount >= OUTREACH_MAX_EMAIL_STEPS,
+                            taskDisabled: archived || full,
+                            onAddEmail: addEmail,
+                            onAddTask: addTask
                         }),
                         /*#__PURE__*/ _jsx(Typography, {
                             variant: "caption",
                             color: "text.secondary",
                             children: `Up to ${OUTREACH_MAX_STEPS} steps, ${OUTREACH_MAX_EMAIL_STEPS} of them emails.`
                         }),
-                        /*#__PURE__*/ _jsx(CardDisplay, {
-                            header: "Who it sends to, and when",
-                            help: pluginDocsHelp('sequences', {
-                                anchor: '#build-a-sequence',
-                                excerpt: 'A sequence sends only to the countries both it and your organization allow, and in its mailbox’s sending hours unless it has its own.'
-                            }),
-                            contentGutterX: true,
-                            contentGutterY: true,
-                            children: /*#__PURE__*/ _jsxs(Stack, {
-                                spacing: 2,
-                                children: [
-                                    /*#__PURE__*/ _jsx(Autocomplete, {
-                                        multiple: true,
-                                        options: countryOptions,
-                                        value: draft.settings.allowedCountries,
-                                        getOptionLabel: outreachCountryLabel,
-                                        onChange: (_event, next)=>update({
-                                                settings: _extends({}, draft.settings, {
-                                                    allowedCountries: next
-                                                })
-                                            }),
-                                        disabled: archived,
-                                        renderValue: (value, getItemProps)=>value.map((code, index)=>{
-                                                const _getItemProps = getItemProps({
-                                                    index
-                                                }), { key } = _getItemProps, item = _object_without_properties_loose(_getItemProps, [
-                                                    "key"
-                                                ]);
-                                                return /*#__PURE__*/ _jsx(Chip, _extends({
-                                                    size: "small",
-                                                    label: outreachCountryLabel(code)
-                                                }, item), key);
-                                            }),
-                                        renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
-                                                label: "Countries",
-                                                error: Boolean(countriesIssue),
-                                                helperText: countriesIssue != null ? countriesIssue : 'Among the countries your organization allows. Cold contacts are emailed only in the United States.'
-                                            }))
-                                    }),
-                                    /*#__PURE__*/ _jsx(FormControlLabel, {
-                                        control: /*#__PURE__*/ _jsx(Switch, {
-                                            checked: draft.settings.allowCustomers,
-                                            onChange: (event)=>update({
-                                                    settings: _extends({}, draft.settings, {
-                                                        allowCustomers: event.target.checked
-                                                    })
-                                                }),
-                                            disabled: archived
-                                        }),
-                                        label: "Include customers"
-                                    }),
-                                    /*#__PURE__*/ _jsxs(Stack, {
-                                        spacing: 0,
-                                        children: [
-                                            /*#__PURE__*/ _jsx(FormControlLabel, {
-                                                control: /*#__PURE__*/ _jsx(Switch, {
-                                                    checked: draft.settings.trackClicks,
-                                                    onChange: (event)=>update({
-                                                            settings: _extends({}, draft.settings, {
-                                                                trackClicks: event.target.checked
-                                                            })
-                                                        }),
-                                                    disabled: archived
-                                                }),
-                                                label: "Count link clicks"
-                                            }),
-                                            /*#__PURE__*/ _jsx(Typography, {
-                                                variant: "caption",
-                                                color: "text.secondary",
-                                                children: "Links in these emails are replaced with links of ours that forward to the same page, so clicks can be counted. The recipient sees the replacement, not your address. The emails stay plain text."
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ _jsxs(Stack, {
-                                        spacing: 0,
-                                        children: [
-                                            /*#__PURE__*/ _jsx(FormControlLabel, {
-                                                control: /*#__PURE__*/ _jsx(Switch, {
-                                                    checked: draft.settings.countOpens,
-                                                    onChange: (event)=>update({
-                                                            settings: _extends({}, draft.settings, {
-                                                                countOpens: event.target.checked
-                                                            })
-                                                        }),
-                                                    disabled: archived
-                                                }),
-                                                label: "Count opens"
-                                            }),
-                                            /*#__PURE__*/ _jsx(Typography, {
-                                                variant: "caption",
-                                                color: "text.secondary",
-                                                children: "Each email also goes out as HTML — the same words — with a tiny tracking image, so opens can be counted. The plain-text version is unchanged. It makes the email look less like one written by hand, and some spam filters score HTML with a remote image against you, so turn it on to measure a slice of your sends rather than for every sequence. Gmail opens count; Apple Mail loads every image on arrival, so its loads are counted separately."
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ _jsxs(Stack, {
-                                        spacing: 0,
-                                        children: [
-                                            /*#__PURE__*/ _jsx(FormControlLabel, {
-                                                control: /*#__PURE__*/ _jsx(Switch, {
-                                                    checked: draft.settings.listUnsubscribe,
-                                                    onChange: (event)=>update({
-                                                            settings: _extends({}, draft.settings, {
-                                                                listUnsubscribe: event.target.checked
-                                                            })
-                                                        }),
-                                                    disabled: archived
-                                                }),
-                                                label: "Add a mail-client unsubscribe button"
-                                            }),
-                                            /*#__PURE__*/ _jsx(Typography, {
-                                                variant: "caption",
-                                                color: "text.secondary",
-                                                children: "Adds the List-Unsubscribe header, so the recipient’s mail app shows its own Unsubscribe button. It’s the easiest way out for them, and fewer people mark you as spam when they have it, but mail apps then label the email as coming from a mailing list. Off, the footer’s “reply ‘no’” line is the way out, and it’s always there."
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ _jsx(OutreachSendWindowFields, {
-                                        window: draft.settings.window,
-                                        onChange: (window)=>update({
-                                                settings: _extends({}, draft.settings, {
-                                                    window
-                                                })
-                                            }),
-                                        daysIssue: issueAt('settings.window.days'),
-                                        hoursIssue: issueAt('settings.window'),
-                                        disabled: archived
-                                    })
-                                ]
-                            })
+                        /*#__PURE__*/ _jsx(SequenceSendingCard, {
+                            settings: draft.settings,
+                            countryOptions: countryOptions,
+                            countriesIssue: countriesIssue,
+                            daysIssue: issueAt('settings.window.days'),
+                            hoursIssue: issueAt('settings.window'),
+                            disabled: archived,
+                            onCountries: setCountries,
+                            onSettings: setSettings
                         })
                     ]
                 })
@@ -557,7 +818,7 @@ import { useOutreachEmailTemplates } from "./use-outreach-crm.js";
                 sequence: sequence,
                 stepIndex: testing,
                 contactGroupId: sequence.hostId ? consentGroupForHost((_props_org = props.org) != null ? _props_org : null, sequence.hostId).groupId : '',
-                selfEmail: (_ref3 = user == null ? void 0 : user.email) != null ? _ref3 : null,
+                selfEmail: (_ref2 = user == null ? void 0 : user.email) != null ? _ref2 : null,
                 unsaved: unsaved,
                 api: api
             }) : null,
@@ -567,23 +828,13 @@ import { useOutreachEmailTemplates } from "./use-outreach-crm.js";
                     md: 5
                 },
                 children: /*#__PURE__*/ _jsx(Box, {
-                    sx: {
-                        position: {
-                            md: 'sticky'
-                        },
-                        top: {
-                            md: 16
-                        }
-                    },
-                    children: /*#__PURE__*/ _jsx(OutreachSequencePreview, {
+                    sx: PREVIEW_COLUMN,
+                    children: /*#__PURE__*/ _jsx(MemoSequencePreview, {
                         steps: draft.steps,
                         orgSettings: settings.settings,
                         orgSettingsStatus: settings.status,
                         templates: templates.data,
-                        sender: mailbox ? {
-                            name: mailbox.displayName,
-                            email: mailbox.sendAs || mailbox.email
-                        } : null,
+                        sender: sender,
                         siteName: siteName
                     })
                 })