@aglyn/plugins-outreach 1.0.0-beta.143

package/src/lib/components/sequence-mailbox-picker.js

@@ -0,0 +1,137 @@
+/**
+ * @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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, MenuItem, Stack, TextField, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+import { OUTREACH_MAILBOX_STATUS_LABELS } from "../mailboxes/mailbox-settings.js";
+import { outreachMailboxActivationIssue } from "../model/sequence-draft.js";
+import { OutreachLink } from "./outreach-ui.js";
+import { useOutreachMailboxApi } from "./use-outreach-mailbox-api.js";
+/** A mailbox as its line in the menu reads: who mail is from, and any status that stops it sending. */ export function outreachMailboxOptionLabel(mailbox) {
+    var _OUTREACH_MAILBOX_STATUS_LABELS_mailbox_status;
+    var _mailbox_displayName;
+    const address = mailbox.sendAs || mailbox.email;
+    const name = (_mailbox_displayName = mailbox.displayName) == null ? void 0 : _mailbox_displayName.trim();
+    const from = name ? `${name} <${address}>` : address;
+    return mailbox.status === 'connected' ? from : `${from} — ${(_OUTREACH_MAILBOX_STATUS_LABELS_mailbox_status = OUTREACH_MAILBOX_STATUS_LABELS[mailbox.status]) != null ? _OUTREACH_MAILBOX_STATUS_LABELS_mailbox_status : mailbox.status}`;
+}
+/**
+ * The mailboxes a member may choose for a sequence: their own, or every
+ * one for an organization owner or admin — the two the save route lets
+ * send from a mailbox — never a disconnected one. The mailbox a sequence
+ * already names stays in the list whoever connected it, so the field never
+ * reads as empty.
+ */ export function outreachOfferedMailboxes(mailboxes, input) {
+    return mailboxes.filter((mailbox)=>mailbox.id === input.value || mailbox.status !== 'disconnected' && (input.canManageAll || input.uid !== null && mailbox.connectedByUid === input.uid));
+}
+/**
+ * The mailbox a sequence sends from (AGL-2980), chosen from the Mailboxes
+ * section's own listener and route (AGL-2978).
+ *
+ * Whether the member may choose a colleague's mailbox is the mailbox
+ * routes' answer (`availability().canManageAll`); until it arrives, or when
+ * it cannot be had, the member is offered their own, which is always
+ * allowed. A chosen mailbox that is paused or waiting to be reconnected can
+ * hold a draft, and the field says what activating will need.
+ */ export function OutreachSequenceMailboxPicker(props) {
+    var _offered_find, _ref, _props_error;
+    const { mailboxes, uid, value } = props;
+    const api = useOutreachMailboxApi(props.orgId);
+    const [canManageAll, setCanManageAll] = useState(false);
+    useEffect(()=>{
+        let current = true;
+        api.availability().then((answer)=>{
+            if (current) setCanManageAll(answer.canManageAll);
+        }).catch(()=>undefined);
+        return ()=>{
+            current = false;
+        };
+    }, [
+        api
+    ]);
+    if (mailboxes.status === 'loading') {
+        return /*#__PURE__*/ _jsx(TextField, {
+            label: "Mailbox",
+            value: "",
+            disabled: true,
+            helperText: "Loading mailboxes…",
+            fullWidth: true
+        });
+    }
+    if (mailboxes.status === 'error') {
+        return /*#__PURE__*/ _jsx(Alert, {
+            severity: "error",
+            children: "The mailboxes could not be loaded. Reload the page to try again."
+        });
+    }
+    const offered = outreachOfferedMailboxes(mailboxes.mailboxes, {
+        uid,
+        canManageAll,
+        value
+    });
+    if (!offered.length) {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 0.5,
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "subtitle2",
+                    component: "p",
+                    children: "Mailbox"
+                }),
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: "A sequence sends from your own connected mailbox, and you haven’t connected one yet."
+                }),
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    children: /*#__PURE__*/ _jsx(OutreachLink, {
+                        href: props.mailboxesPath,
+                        children: "Connect a mailbox in Mailboxes"
+                    })
+                }),
+                props.error ? /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    color: "error",
+                    children: props.error
+                }) : null
+            ]
+        });
+    }
+    const chosen = (_offered_find = offered.find((mailbox)=>mailbox.id === value)) != null ? _offered_find : null;
+    // A chosen mailbox that cannot send, or one that no longer exists, says
+    // what activating the sequence will need.
+    const standing = value ? outreachMailboxActivationIssue(value, chosen) : null;
+    return /*#__PURE__*/ _jsx(TextField, {
+        select: true,
+        label: "Mailbox",
+        value: chosen ? value : '',
+        onChange: (event)=>props.onChange(event.target.value),
+        disabled: props.disabled,
+        error: Boolean(props.error),
+        helperText: (_ref = (_props_error = props.error) != null ? _props_error : standing == null ? void 0 : standing.message) != null ? _ref : 'Every email in the sequence is sent from it, in its sending hours and timezone.',
+        fullWidth: true,
+        children: offered.map((mailbox)=>/*#__PURE__*/ _jsx(MenuItem, {
+                value: mailbox.id,
+                children: outreachMailboxOptionLabel(mailbox)
+            }, mailbox.id))
+    });
+}
+OutreachSequenceMailboxPicker.displayName = 'OutreachSequenceMailboxPicker';
+export default OutreachSequenceMailboxPicker;
+
+//# sourceMappingURL=sequence-mailbox-picker.js.map

package/src/lib/components/sequence-mailbox-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/outreach/src/lib/components/sequence-mailbox-picker.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport { Alert, MenuItem, Stack, TextField, Typography } from '@mui/material'\nimport { useEffect, useState } from 'react'\nimport { OUTREACH_MAILBOX_STATUS_LABELS } from '../mailboxes/mailbox-settings'\nimport type { OutreachMailbox } from '../model/outreach.types'\nimport { outreachMailboxActivationIssue } from '../model/sequence-draft'\nimport { OutreachLink } from './outreach-ui'\nimport { useOutreachMailboxApi } from './use-outreach-mailbox-api'\nimport type { OutreachMailboxesResult } from './use-outreach-mailboxes'\n\nexport interface OutreachSequenceMailboxPickerProps {\n  orgId: string\n  /** The member choosing, whose own mailboxes are offered. */\n  uid: string | null\n  /** The organization's mailboxes, from the Mailboxes section's own listener. */\n  mailboxes: OutreachMailboxesResult\n  /** The Mailboxes section, where a mailbox is connected, resumed or reconnected. */\n  mailboxesPath: string\n  value: string\n  onChange(mailboxId: string): void\n  error?: string\n  disabled?: boolean\n}\n\n/** A mailbox as its line in the menu reads: who mail is from, and any status that stops it sending. */\nexport function outreachMailboxOptionLabel(mailbox: OutreachMailbox): string {\n  const address = mailbox.sendAs || mailbox.email\n  const name = mailbox.displayName?.trim()\n  const from = name ? `${name} <${address}>` : address\n  return mailbox.status === 'connected'\n    ? from\n    : `${from} — ${OUTREACH_MAILBOX_STATUS_LABELS[mailbox.status] ?? mailbox.status}`\n}\n\n/**\n * The mailboxes a member may choose for a sequence: their own, or every\n * one for an organization owner or admin — the two the save route lets\n * send from a mailbox — never a disconnected one. The mailbox a sequence\n * already names stays in the list whoever connected it, so the field never\n * reads as empty.\n */\nexport function outreachOfferedMailboxes(\n  mailboxes: readonly OutreachMailbox[],\n  input: { uid: string | null; canManageAll: boolean; value: string },\n): OutreachMailbox[] {\n  return mailboxes.filter(\n    (mailbox) =>\n      mailbox.id === input.value ||\n      (mailbox.status !== 'disconnected' &&\n        (input.canManageAll || (input.uid !== null && mailbox.connectedByUid === input.uid))),\n  )\n}\n\n/**\n * The mailbox a sequence sends from (AGL-2980), chosen from the Mailboxes\n * section's own listener and route (AGL-2978).\n *\n * Whether the member may choose a colleague's mailbox is the mailbox\n * routes' answer (`availability().canManageAll`); until it arrives, or when\n * it cannot be had, the member is offered their own, which is always\n * allowed. A chosen mailbox that is paused or waiting to be reconnected can\n * hold a draft, and the field says what activating will need.\n */\nexport function OutreachSequenceMailboxPicker(props: OutreachSequenceMailboxPickerProps) {\n  const { mailboxes, uid, value } = props\n  const api = useOutreachMailboxApi(props.orgId)\n  const [canManageAll, setCanManageAll] = useState(false)\n\n  useEffect(() => {\n    let current = true\n    api\n      .availability()\n      .then((answer) => {\n        if (current) setCanManageAll(answer.canManageAll)\n      })\n      .catch(() => undefined)\n    return () => {\n      current = false\n    }\n  }, [api])\n\n  if (mailboxes.status === 'loading') {\n    return <TextField label=\"Mailbox\" value=\"\" disabled helperText=\"Loading mailboxes…\" fullWidth />\n  }\n  if (mailboxes.status === 'error') {\n    return (\n      <Alert severity=\"error\">The mailboxes could not be loaded. Reload the page to try again.</Alert>\n    )\n  }\n\n  const offered = outreachOfferedMailboxes(mailboxes.mailboxes, { uid, canManageAll, value })\n  if (!offered.length) {\n    return (\n      <Stack spacing={0.5}>\n        <Typography variant=\"subtitle2\" component=\"p\">\n          Mailbox\n        </Typography>\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          A sequence sends from your own connected mailbox, and you haven’t connected one yet.\n        </Typography>\n        <Typography variant=\"body2\">\n          <OutreachLink href={props.mailboxesPath}>Connect a mailbox in Mailboxes</OutreachLink>\n        </Typography>\n        {props.error ? (\n          <Typography variant=\"body2\" color=\"error\">\n            {props.error}\n          </Typography>\n        ) : null}\n      </Stack>\n    )\n  }\n\n  const chosen = offered.find((mailbox) => mailbox.id === value) ?? null\n  // A chosen mailbox that cannot send, or one that no longer exists, says\n  // what activating the sequence will need.\n  const standing = value ? outreachMailboxActivationIssue(value, chosen) : null\n  return (\n    <TextField\n      select\n      label=\"Mailbox\"\n      value={chosen ? value : ''}\n      onChange={(event) => props.onChange(event.target.value)}\n      disabled={props.disabled}\n      error={Boolean(props.error)}\n      helperText={\n        props.error ??\n        standing?.message ??\n        'Every email in the sequence is sent from it, in its sending hours and timezone.'\n      }\n      fullWidth\n    >\n      {offered.map((mailbox) => (\n        <MenuItem key={mailbox.id} value={mailbox.id}>\n          {outreachMailboxOptionLabel(mailbox)}\n        </MenuItem>\n      ))}\n    </TextField>\n  )\n}\nOutreachSequenceMailboxPicker.displayName = 'OutreachSequenceMailboxPicker'\n\nexport default OutreachSequenceMailboxPicker\n"],"names":["Alert","MenuItem","Stack","TextField","Typography","useEffect","useState","OUTREACH_MAILBOX_STATUS_LABELS","outreachMailboxActivationIssue","OutreachLink","useOutreachMailboxApi","outreachMailboxOptionLabel","mailbox","address","sendAs","email","name","displayName","trim","from","status","outreachOfferedMailboxes","mailboxes","input","filter","id","value","canManageAll","uid","connectedByUid","OutreachSequenceMailboxPicker","props","offered","api","orgId","setCanManageAll","current","availability","then","answer","catch","undefined","label","disabled","helperText","fullWidth","severity","length","spacing","variant","component","color","href","mailboxesPath","error","chosen","find","standing","select","onChange","event","target","Boolean","message","map"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;AAEA,SAASA,KAAK,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,SAAS,EAAEC,UAAU,QAAQ,gBAAe;AAC7E,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAC3C,SAASC,8BAA8B,QAAQ,mCAA+B;AAE9E,SAASC,8BAA8B,QAAQ,6BAAyB;AACxE,SAASC,YAAY,QAAQ,mBAAe;AAC5C,SAASC,qBAAqB,QAAQ,gCAA4B;AAiBlE,qGAAqG,GACrG,OAAO,SAASC,2BAA2BC,OAAwB;QAMhDL;QAJJK;IADb,MAAMC,UAAUD,QAAQE,MAAM,IAAIF,QAAQG,KAAK;IAC/C,MAAMC,QAAOJ,uBAAAA,QAAQK,WAAW,qBAAnBL,qBAAqBM,IAAI;IACtC,MAAMC,OAAOH,OAAO,GAAGA,KAAK,EAAE,EAAEH,QAAQ,CAAC,CAAC,GAAGA;IAC7C,OAAOD,QAAQQ,MAAM,KAAK,cACtBD,OACA,GAAGA,KAAK,GAAG,GAAEZ,iDAAAA,8BAA8B,CAACK,QAAQQ,MAAM,CAAC,YAA9Cb,iDAAkDK,QAAQQ,MAAM,EAAE;AACrF;AAEA;;;;;;CAMC,GACD,OAAO,SAASC,yBACdC,SAAqC,EACrCC,KAAmE;IAEnE,OAAOD,UAAUE,MAAM,CACrB,CAACZ,UACCA,QAAQa,EAAE,KAAKF,MAAMG,KAAK,IACzBd,QAAQQ,MAAM,KAAK,kBACjBG,CAAAA,MAAMI,YAAY,IAAKJ,MAAMK,GAAG,KAAK,QAAQhB,QAAQiB,cAAc,KAAKN,MAAMK,GAAG;AAE1F;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASE,8BAA8BC,KAAyC;QAiDtEC,eAaTD,MAAAA;IA7DN,MAAM,EAAET,SAAS,EAAEM,GAAG,EAAEF,KAAK,EAAE,GAAGK;IAClC,MAAME,MAAMvB,sBAAsBqB,MAAMG,KAAK;IAC7C,MAAM,CAACP,cAAcQ,gBAAgB,GAAG7B,SAAS;IAEjDD,UAAU;QACR,IAAI+B,UAAU;QACdH,IACGI,YAAY,GACZC,IAAI,CAAC,CAACC;YACL,IAAIH,SAASD,gBAAgBI,OAAOZ,YAAY;QAClD,GACCa,KAAK,CAAC,IAAMC;QACf,OAAO;YACLL,UAAU;QACZ;IACF,GAAG;QAACH;KAAI;IAER,IAAIX,UAAUF,MAAM,KAAK,WAAW;QAClC,qBAAO,KAACjB;YAAUuC,OAAM;YAAUhB,OAAM;YAAGiB,QAAQ;YAACC,YAAW;YAAqBC,SAAS;;IAC/F;IACA,IAAIvB,UAAUF,MAAM,KAAK,SAAS;QAChC,qBACE,KAACpB;YAAM8C,UAAS;sBAAQ;;IAE5B;IAEA,MAAMd,UAAUX,yBAAyBC,UAAUA,SAAS,EAAE;QAAEM;QAAKD;QAAcD;IAAM;IACzF,IAAI,CAACM,QAAQe,MAAM,EAAE;QACnB,qBACE,MAAC7C;YAAM8C,SAAS;;8BACd,KAAC5C;oBAAW6C,SAAQ;oBAAYC,WAAU;8BAAI;;8BAG9C,KAAC9C;oBAAW6C,SAAQ;oBAAQE,OAAM;8BAAiB;;8BAGnD,KAAC/C;oBAAW6C,SAAQ;8BAClB,cAAA,KAACxC;wBAAa2C,MAAMrB,MAAMsB,aAAa;kCAAE;;;gBAE1CtB,MAAMuB,KAAK,iBACV,KAAClD;oBAAW6C,SAAQ;oBAAQE,OAAM;8BAC/BpB,MAAMuB,KAAK;qBAEZ;;;IAGV;IAEA,MAAMC,UAASvB,gBAAAA,QAAQwB,IAAI,CAAC,CAAC5C,UAAYA,QAAQa,EAAE,KAAKC,kBAAzCM,gBAAmD;IAClE,wEAAwE;IACxE,0CAA0C;IAC1C,MAAMyB,WAAW/B,QAAQlB,+BAA+BkB,OAAO6B,UAAU;IACzE,qBACE,KAACpD;QACCuD,MAAM;QACNhB,OAAM;QACNhB,OAAO6B,SAAS7B,QAAQ;QACxBiC,UAAU,CAACC,QAAU7B,MAAM4B,QAAQ,CAACC,MAAMC,MAAM,CAACnC,KAAK;QACtDiB,UAAUZ,MAAMY,QAAQ;QACxBW,OAAOQ,QAAQ/B,MAAMuB,KAAK;QAC1BV,UAAU,GACRb,QAAAA,eAAAA,MAAMuB,KAAK,YAAXvB,eACA0B,4BAAAA,SAAUM,OAAO,YADjBhC,OAEA;QAEFc,SAAS;kBAERb,QAAQgC,GAAG,CAAC,CAACpD,wBACZ,KAACX;gBAA0ByB,OAAOd,QAAQa,EAAE;0BACzCd,2BAA2BC;eADfA,QAAQa,EAAE;;AAMjC;AACAK,8BAA8Bb,WAAW,GAAG;AAE5C,eAAea,8BAA6B"}

package/src/lib/components/sequence-preview.d.ts

@@ -0,0 +1,27 @@
+import type { OutreachComplianceSettingsDocument, OutreachSequenceStep } from '../model/outreach.types';
+import type { OutreachTemplateOption } from './use-outreach-crm';
+import type { OutreachLoadStatus } from './use-outreach-data';
+export interface OutreachSequencePreviewProps {
+    steps: readonly OutreachSequenceStep[];
+    /** The organization's footer fields; `null` until they are read. */
+    orgSettings: OutreachComplianceSettingsDocument | null;
+    orgSettingsStatus: OutreachLoadStatus;
+    templates: readonly OutreachTemplateOption[];
+    /** Who the email is from, as the mailbox says it. */
+    sender: {
+        name: string;
+        email: string;
+    } | null;
+    siteName: string;
+}
+/**
+ * The editor's live preview (AGL-2980): each email as it would reach a
+ * sample contact, written by the engine's own composer as the rep types —
+ * merge fields filled, the sample's personal line in place, and the real
+ * footer from the organization's compliance settings at the end.
+ */
+export declare function OutreachSequencePreview(props: OutreachSequencePreviewProps): import("react").JSX.Element;
+export declare namespace OutreachSequencePreview {
+    var displayName: string;
+}
+export default OutreachSequencePreview;

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

@@ -0,0 +1,146 @@
+/**
+ * @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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { pluginDocsHelp } from "@aglyn/aglyn";
+import { crmMergeUnresolvedMessage } from "@aglyn/aglyn/app-utils/crm-email-templates";
+import { CardDisplay } from "@aglyn/shared-ui-jsx";
+import { Alert, Divider, MenuItem, Paper, Stack, TextField, Typography } from "@mui/material";
+import { useMemo, useState } from "react";
+import { OUTREACH_SAMPLE_PERSON, outreachSampleMergeContext, previewOutreachStep } from "../model/step-preview.js";
+import { OutreachLoading } from "./outreach-ui.js";
+/**
+ * The editor's live preview (AGL-2980): each email as it would reach a
+ * sample contact, written by the engine's own composer as the rep types —
+ * merge fields filled, the sample's personal line in place, and the real
+ * footer from the organization's compliance settings at the end.
+ */ export function OutreachSequencePreview(props) {
+    var _ref;
+    var _result_error;
+    const emails = props.steps.map((step, index)=>({
+            step,
+            index
+        })).filter(({ step })=>step.kind === 'email');
+    const [chosen, setChosen] = useState(0);
+    const selected = emails[Math.min(chosen, emails.length - 1)];
+    const result = useMemo(()=>{
+        var _ref;
+        var _props_templates_find;
+        if (!selected) return null;
+        const step = selected.step;
+        return previewOutreachStep({
+            steps: props.steps,
+            stepIndex: selected.index,
+            orgSettings: props.orgSettings,
+            merge: outreachSampleMergeContext({
+                sender: props.sender,
+                siteName: props.siteName
+            }),
+            email: OUTREACH_SAMPLE_PERSON.email,
+            personalLine: OUTREACH_SAMPLE_PERSON.personalLine,
+            templateBody: step.kind === 'email' && step.templateId ? (_ref = (_props_templates_find = props.templates.find((template)=>template.id === step.templateId)) == null ? void 0 : _props_templates_find.body) != null ? _ref : null : null
+        });
+    }, [
+        selected,
+        props.steps,
+        props.orgSettings,
+        props.sender,
+        props.siteName,
+        props.templates
+    ]);
+    return /*#__PURE__*/ _jsx(CardDisplay, {
+        header: "Preview",
+        subheader: `As ${OUTREACH_SAMPLE_PERSON.name} of ${OUTREACH_SAMPLE_PERSON.companyName} would get it`,
+        help: pluginDocsHelp('sequences', {
+            anchor: '#build-a-sequence'
+        }),
+        contentGutterX: true,
+        contentGutterY: true,
+        children: !selected ? /*#__PURE__*/ _jsx(Typography, {
+            variant: "body2",
+            color: "text.secondary",
+            children: "Add an email step to preview it."
+        }) : props.orgSettingsStatus === 'loading' ? /*#__PURE__*/ _jsx(OutreachLoading, {
+            label: "Loading your footer…"
+        }) : props.orgSettingsStatus !== 'ready' ? /*#__PURE__*/ _jsx(Alert, {
+            severity: "info",
+            children: "The preview needs your compliance settings, which couldn’t be read. It shows once they can be."
+        }) : /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 1.5,
+            children: [
+                emails.length > 1 ? /*#__PURE__*/ _jsx(TextField, {
+                    select: true,
+                    size: "small",
+                    label: "Email",
+                    value: Math.min(chosen, emails.length - 1),
+                    onChange: (event)=>setChosen(Number(event.target.value)),
+                    children: emails.map((entry, position)=>/*#__PURE__*/ _jsx(MenuItem, {
+                            value: position,
+                            children: `Email ${position + 1} · step ${entry.index + 1}`
+                        }, entry.step.id))
+                }) : null,
+                (result == null ? void 0 : result.email) ? /*#__PURE__*/ _jsx(Paper, {
+                    variant: "outlined",
+                    sx: {
+                        p: 1.5
+                    },
+                    "aria-label": "Email preview",
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        spacing: 1,
+                        children: [
+                            /*#__PURE__*/ _jsxs(Typography, {
+                                variant: "body2",
+                                children: [
+                                    /*#__PURE__*/ _jsxs(Typography, {
+                                        component: "span",
+                                        variant: "body2",
+                                        color: "text.secondary",
+                                        children: [
+                                            "Subject:",
+                                            ' '
+                                        ]
+                                    }),
+                                    result.email.subject
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Divider, {}),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                sx: {
+                                    whiteSpace: 'pre-wrap',
+                                    wordBreak: 'break-word'
+                                },
+                                children: result.email.text
+                            })
+                        ]
+                    })
+                }) : /*#__PURE__*/ _jsx(Alert, {
+                    severity: "info",
+                    children: (_ref = result == null ? void 0 : (_result_error = result.error) == null ? void 0 : _result_error.message) != null ? _ref : 'This email can’t be previewed yet.'
+                }),
+                (result == null ? void 0 : result.email) && result.unresolvedFields.length ? /*#__PURE__*/ _jsx(Typography, {
+                    variant: "caption",
+                    color: "text.secondary",
+                    children: `${crmMergeUnresolvedMessage(result.unresolvedFields)}. They're sent empty.`
+                }) : null
+            ]
+        })
+    });
+}
+OutreachSequencePreview.displayName = 'OutreachSequencePreview';
+export default OutreachSequencePreview;
+
+//# sourceMappingURL=sequence-preview.js.map

package/src/lib/components/sequence-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/outreach/src/lib/components/sequence-preview.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport { pluginDocsHelp } from '@aglyn/aglyn'\nimport { crmMergeUnresolvedMessage } from '@aglyn/aglyn/app-utils/crm-email-templates'\nimport { CardDisplay } from '@aglyn/shared-ui-jsx'\nimport {\n  Alert,\n  Divider,\n  MenuItem,\n  Paper,\n  Stack,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { useMemo, useState } from 'react'\nimport type {\n  OutreachComplianceSettingsDocument,\n  OutreachSequenceStep,\n} from '../model/outreach.types'\nimport {\n  OUTREACH_SAMPLE_PERSON,\n  outreachSampleMergeContext,\n  previewOutreachStep,\n} from '../model/step-preview'\nimport { OutreachLoading } from './outreach-ui'\nimport type { OutreachTemplateOption } from './use-outreach-crm'\nimport type { OutreachLoadStatus } from './use-outreach-data'\n\nexport interface OutreachSequencePreviewProps {\n  steps: readonly OutreachSequenceStep[]\n  /** The organization's footer fields; `null` until they are read. */\n  orgSettings: OutreachComplianceSettingsDocument | null\n  orgSettingsStatus: OutreachLoadStatus\n  templates: readonly OutreachTemplateOption[]\n  /** Who the email is from, as the mailbox says it. */\n  sender: { name: string; email: string } | null\n  siteName: string\n}\n\n/**\n * The editor's live preview (AGL-2980): each email as it would reach a\n * sample contact, written by the engine's own composer as the rep types —\n * merge fields filled, the sample's personal line in place, and the real\n * footer from the organization's compliance settings at the end.\n */\nexport function OutreachSequencePreview(props: OutreachSequencePreviewProps) {\n  const emails = props.steps\n    .map((step, index) => ({ step, index }))\n    .filter(({ step }) => step.kind === 'email')\n  const [chosen, setChosen] = useState(0)\n  const selected = emails[Math.min(chosen, emails.length - 1)]\n\n  const result = useMemo(() => {\n    if (!selected) return null\n    const step = selected.step\n    return previewOutreachStep({\n      steps: props.steps,\n      stepIndex: selected.index,\n      orgSettings: props.orgSettings,\n      merge: outreachSampleMergeContext({\n        sender: props.sender,\n        siteName: props.siteName,\n      }),\n      email: OUTREACH_SAMPLE_PERSON.email,\n      personalLine: OUTREACH_SAMPLE_PERSON.personalLine,\n      templateBody:\n        step.kind === 'email' && step.templateId\n          ? (props.templates.find((template) => template.id === step.templateId)\n              ?.body ?? null)\n          : null,\n    })\n  }, [\n    selected,\n    props.steps,\n    props.orgSettings,\n    props.sender,\n    props.siteName,\n    props.templates,\n  ])\n\n  return (\n    <CardDisplay\n      header=\"Preview\"\n      subheader={`As ${OUTREACH_SAMPLE_PERSON.name} of ${OUTREACH_SAMPLE_PERSON.companyName} would get it`}\n      help={pluginDocsHelp('sequences', { anchor: '#build-a-sequence' })}\n      contentGutterX\n      contentGutterY\n    >\n      {!selected ? (\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          Add an email step to preview it.\n        </Typography>\n      ) : props.orgSettingsStatus === 'loading' ? (\n        <OutreachLoading label=\"Loading your footer…\" />\n      ) : props.orgSettingsStatus !== 'ready' ? (\n        <Alert severity=\"info\">\n          The preview needs your compliance settings, which couldn’t be read. It\n          shows once they can be.\n        </Alert>\n      ) : (\n        <Stack spacing={1.5}>\n          {emails.length > 1 ? (\n            <TextField\n              select\n              size=\"small\"\n              label=\"Email\"\n              value={Math.min(chosen, emails.length - 1)}\n              onChange={(event) => setChosen(Number(event.target.value))}\n            >\n              {emails.map((entry, position) => (\n                <MenuItem key={entry.step.id} value={position}>\n                  {`Email ${position + 1} · step ${entry.index + 1}`}\n                </MenuItem>\n              ))}\n            </TextField>\n          ) : null}\n          {result?.email ? (\n            <Paper\n              variant=\"outlined\"\n              sx={{ p: 1.5 }}\n              aria-label=\"Email preview\"\n            >\n              <Stack spacing={1}>\n                <Typography variant=\"body2\">\n                  <Typography\n                    component=\"span\"\n                    variant=\"body2\"\n                    color=\"text.secondary\"\n                  >\n                    Subject:{' '}\n                  </Typography>\n                  {result.email.subject}\n                </Typography>\n                <Divider />\n                <Typography\n                  variant=\"body2\"\n                  sx={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}\n                >\n                  {result.email.text}\n                </Typography>\n              </Stack>\n            </Paper>\n          ) : (\n            <Alert severity=\"info\">\n              {result?.error?.message ?? 'This email can’t be previewed yet.'}\n            </Alert>\n          )}\n          {result?.email && result.unresolvedFields.length ? (\n            <Typography variant=\"caption\" color=\"text.secondary\">\n              {`${crmMergeUnresolvedMessage(result.unresolvedFields)}. They're sent empty.`}\n            </Typography>\n          ) : null}\n        </Stack>\n      )}\n    </CardDisplay>\n  )\n}\nOutreachSequencePreview.displayName = 'OutreachSequencePreview'\n\nexport default OutreachSequencePreview\n"],"names":["pluginDocsHelp","crmMergeUnresolvedMessage","CardDisplay","Alert","Divider","MenuItem","Paper","Stack","TextField","Typography","useMemo","useState","OUTREACH_SAMPLE_PERSON","outreachSampleMergeContext","previewOutreachStep","OutreachLoading","OutreachSequencePreview","props","result","emails","steps","map","step","index","filter","kind","chosen","setChosen","selected","Math","min","length","stepIndex","orgSettings","merge","sender","siteName","email","personalLine","templateBody","templateId","templates","find","template","id","body","header","subheader","name","companyName","help","anchor","contentGutterX","contentGutterY","variant","color","orgSettingsStatus","label","severity","spacing","select","size","value","onChange","event","Number","target","entry","position","sx","p","aria-label","component","subject","whiteSpace","wordBreak","text","error","message","unresolvedFields","displayName"],"mappings":"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"}

package/src/lib/components/sequence-step-card.d.ts

@@ -0,0 +1,31 @@
+import { type OutreachSequenceStep } from '../model/outreach.types';
+import type { OutreachTemplateOption } from './use-outreach-crm';
+export interface OutreachStepCardProps {
+    step: OutreachSequenceStep;
+    /** Its position, from 0. */
+    index: number;
+    /** How many steps the sequence has, for the move controls. */
+    count: number;
+    /** Whether it is the sequence's first email, which always starts the thread. */
+    firstEmail: boolean;
+    /** Whether it is sent as a reply in the thread an earlier email started. */
+    inThread: boolean;
+    /** The subject the thread was started with, for an in-thread email's note. */
+    threadSubject: string;
+    templates: readonly OutreachTemplateOption[];
+    /** The issue to show beside each field, by the field's own name. */
+    issues: Partial<Record<string, string>>;
+    disabled?: boolean;
+    onChange(step: OutreachSequenceStep): void;
+    onMove(direction: -1 | 1): void;
+    onRemove(): void;
+}
+/**
+ * One step of the sequence editor (AGL-2980): an email — subject, body or a
+ * CRM template, merge fields, the wait before it — or a task for the rep.
+ */
+export declare function OutreachStepCard(props: OutreachStepCardProps): import("react").JSX.Element;
+export declare namespace OutreachStepCard {
+    var displayName: string;
+}
+export default OutreachStepCard;