@aglyn/plugins-outreach 1.0.0-beta.143

package/src/lib/components/sequence-step-card.js

@@ -0,0 +1,326 @@
+/**
+ * @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 { mdiArrowDown, mdiArrowUp, mdiCodeBraces, mdiTrashCanOutline } from "@aglyn/shared-data-mdi";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import { Autocomplete, Button, Card, CardContent, FormControlLabel, IconButton, ListSubheader, Menu, MenuItem, Stack, Switch, TextField, Tooltip, Typography } from "@mui/material";
+import { useRef, useState } from "react";
+import { OUTREACH_MERGE_FIELDS } from "../engine/sequence-validation.js";
+import { OUTREACH_MAX_STEP_DELAY_BUSINESS_DAYS, OUTREACH_TASK_KIND_LABELS, OUTREACH_TASK_KINDS } from "../model/outreach.types.js";
+/** The merge fields, grouped the way the picker heads them. */ const FIELD_GROUPS = [
+    ...new Set(OUTREACH_MERGE_FIELDS.map((field)=>field.group))
+];
+/**
+ * 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 function OutreachStepCard(props) {
+    var _OUTREACH_TASK_KIND_LABELS_step_taskKind, _props_issues_step;
+    const { step, index, count, disabled } = props;
+    const title = step.kind === 'email' ? `Step ${index + 1} · Email` : `Step ${index + 1} · ${(_OUTREACH_TASK_KIND_LABELS_step_taskKind = OUTREACH_TASK_KIND_LABELS[step.taskKind]) != null ? _OUTREACH_TASK_KIND_LABELS_step_taskKind : 'Task'}`;
+    return /*#__PURE__*/ _jsx(Card, {
+        variant: "outlined",
+        component: "section",
+        "aria-label": title,
+        children: /*#__PURE__*/ _jsx(CardContent, {
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        sx: {
+                            alignItems: 'center'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "subtitle1",
+                                sx: {
+                                    flexGrow: 1
+                                },
+                                children: title
+                            }),
+                            /*#__PURE__*/ _jsx(Tooltip, {
+                                title: "Move up",
+                                children: /*#__PURE__*/ _jsx("span", {
+                                    children: /*#__PURE__*/ _jsx(IconButton, {
+                                        size: "small",
+                                        "aria-label": `Move step ${index + 1} up`,
+                                        disabled: disabled || index === 0,
+                                        onClick: ()=>props.onMove(-1),
+                                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                            path: mdiArrowUp.path,
+                                            fontSize: "small"
+                                        })
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Tooltip, {
+                                title: "Move down",
+                                children: /*#__PURE__*/ _jsx("span", {
+                                    children: /*#__PURE__*/ _jsx(IconButton, {
+                                        size: "small",
+                                        "aria-label": `Move step ${index + 1} down`,
+                                        disabled: disabled || index === count - 1,
+                                        onClick: ()=>props.onMove(1),
+                                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                            path: mdiArrowDown.path,
+                                            fontSize: "small"
+                                        })
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Tooltip, {
+                                title: "Remove",
+                                children: /*#__PURE__*/ _jsx("span", {
+                                    children: /*#__PURE__*/ _jsx(IconButton, {
+                                        size: "small",
+                                        "aria-label": `Remove step ${index + 1}`,
+                                        disabled: disabled || count === 1,
+                                        onClick: props.onRemove,
+                                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                            path: mdiTrashCanOutline.path,
+                                            fontSize: "small"
+                                        })
+                                    })
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(DelayField, _extends({}, props)),
+                    step.kind === 'email' ? /*#__PURE__*/ _jsx(EmailStepFields, _extends({}, props, {
+                        step: step
+                    })) : step.kind === 'task' ? /*#__PURE__*/ _jsx(TaskStepFields, _extends({}, props, {
+                        step: step
+                    })) : /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "error",
+                        children: (_props_issues_step = props.issues['step']) != null ? _props_issues_step : 'A step is an email or a task.'
+                    })
+                ]
+            })
+        })
+    });
+}
+OutreachStepCard.displayName = 'OutreachStepCard';
+function DelayField(props) {
+    const { step, index, disabled } = props;
+    const first = index === 0;
+    const issue = props.issues['delayBusinessDays'];
+    return /*#__PURE__*/ _jsx(TextField, {
+        type: "number",
+        label: first ? 'Wait after enrolling (business days)' : 'Wait after the step before (business days)',
+        value: Number.isFinite(step.delayBusinessDays) ? step.delayBusinessDays : '',
+        onChange: (event)=>props.onChange(_extends({}, step, {
+                delayBusinessDays: event.target.value === '' ? Number.NaN : Number(event.target.value)
+            })),
+        disabled: disabled,
+        error: Boolean(issue),
+        helperText: issue != null ? issue : first ? '0 sends at the next opening of the sending hours.' : 'Counted in the mailbox’s timezone, skipping weekends.',
+        slotProps: {
+            htmlInput: {
+                min: 0,
+                max: OUTREACH_MAX_STEP_DELAY_BUSINESS_DAYS,
+                step: 1
+            }
+        },
+        sx: {
+            maxWidth: {
+                sm: 360
+            }
+        }
+    });
+}
+function EmailStepFields(props) {
+    var _props_templates_find;
+    const { step, disabled, issues } = props;
+    const subjectRef = useRef(null);
+    const bodyRef = useRef(null);
+    const lastFocused = useRef('body');
+    const [fieldsAnchor, setFieldsAnchor] = useState(null);
+    const template = (_props_templates_find = props.templates.find((option)=>option.id === step.templateId)) != null ? _props_templates_find : null;
+    const showSubject = !props.inThread;
+    /** Puts `{{key}}` where the caret was in the field last focused. */ const insertField = (key)=>{
+        var _ref, _ref1;
+        setFieldsAnchor(null);
+        const token = `{{${key}}}`;
+        const target = lastFocused.current === 'subject' && showSubject ? 'subject' : template ? null : 'body';
+        if (!target) return;
+        const element = target === 'subject' ? subjectRef.current : bodyRef.current;
+        const value = step[target];
+        const start = (_ref = element == null ? void 0 : element.selectionStart) != null ? _ref : value.length;
+        const end = (_ref1 = element == null ? void 0 : element.selectionEnd) != null ? _ref1 : value.length;
+        props.onChange(_extends({}, step, {
+            [target]: `${value.slice(0, start)}${token}${value.slice(end)}`
+        }));
+        requestAnimationFrame(()=>{
+            element == null ? void 0 : element.focus();
+            element == null ? void 0 : element.setSelectionRange(start + token.length, start + token.length);
+        });
+    };
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 2,
+        children: [
+            props.firstEmail ? null : /*#__PURE__*/ _jsx(FormControlLabel, {
+                control: /*#__PURE__*/ _jsx(Switch, {
+                    checked: step.replyInThread !== false,
+                    onChange: (event)=>props.onChange(_extends({}, step, {
+                            replyInThread: event.target.checked
+                        })),
+                    disabled: disabled
+                }),
+                label: "Reply in the same thread"
+            }),
+            showSubject ? /*#__PURE__*/ _jsx(TextField, {
+                label: "Subject",
+                value: step.subject,
+                inputRef: subjectRef,
+                onFocus: ()=>lastFocused.current = 'subject',
+                onChange: (event)=>props.onChange(_extends({}, step, {
+                        subject: event.target.value
+                    })),
+                disabled: disabled,
+                error: Boolean(issues['subject']),
+                helperText: issues['subject'],
+                fullWidth: true
+            }) : /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: props.threadSubject ? `Sent as a reply: “Re: ${props.threadSubject}”.` : 'Sent as a reply in the thread the earlier email started.'
+            }),
+            /*#__PURE__*/ _jsx(Autocomplete, {
+                options: [
+                    ...props.templates
+                ],
+                value: template,
+                getOptionLabel: (option)=>option.name,
+                isOptionEqualToValue: (option, value)=>option.id === value.id,
+                onChange: (_event, next)=>{
+                    var _ref;
+                    return props.onChange(_extends({}, step, {
+                        templateId: (_ref = next == null ? void 0 : next.id) != null ? _ref : null,
+                        body: next ? '' : step.body
+                    }));
+                },
+                disabled: disabled,
+                renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
+                        label: "CRM email template",
+                        helperText: template ? 'The template’s body is sent; this step’s own subject is the one used.' : 'Optional. Pick one to send its body instead of writing it here.'
+                    }))
+            }),
+            template ? /*#__PURE__*/ _jsx(TextField, {
+                label: "Body (from the template)",
+                value: template.body,
+                multiline: true,
+                minRows: 4,
+                fullWidth: true,
+                disabled: true
+            }) : /*#__PURE__*/ _jsx(TextField, {
+                label: "Body",
+                value: step.body,
+                inputRef: bodyRef,
+                onFocus: ()=>lastFocused.current = 'body',
+                onChange: (event)=>props.onChange(_extends({}, step, {
+                        body: event.target.value
+                    })),
+                disabled: disabled,
+                error: Boolean(issues['body']),
+                helperText: issues['body'],
+                multiline: true,
+                minRows: 6,
+                fullWidth: true
+            }),
+            /*#__PURE__*/ _jsx(Stack, {
+                direction: "row",
+                spacing: 1,
+                children: /*#__PURE__*/ _jsx(Button, {
+                    size: "small",
+                    variant: "outlined",
+                    startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                        path: mdiCodeBraces.path,
+                        fontSize: "small"
+                    }),
+                    onClick: (event)=>setFieldsAnchor(event.currentTarget),
+                    disabled: disabled || Boolean(template) && !showSubject,
+                    "aria-haspopup": "menu",
+                    children: "Insert field"
+                })
+            }),
+            /*#__PURE__*/ _jsx(Menu, {
+                anchorEl: fieldsAnchor,
+                open: Boolean(fieldsAnchor),
+                onClose: ()=>setFieldsAnchor(null),
+                children: FIELD_GROUPS.flatMap((group)=>[
+                        /*#__PURE__*/ _jsx(ListSubheader, {
+                            children: group
+                        }, `group-${group}`),
+                        ...OUTREACH_MERGE_FIELDS.filter((field)=>field.group === group).map((field)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                onClick: ()=>insertField(field.key),
+                                children: field.label
+                            }, field.key))
+                    ])
+            })
+        ]
+    });
+}
+function TaskStepFields(props) {
+    var _issues_title;
+    const { step, disabled, issues } = props;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: {
+            xs: 'column',
+            sm: 'row'
+        },
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ _jsx(TextField, {
+                select: true,
+                label: "Task",
+                value: OUTREACH_TASK_KINDS.includes(step.taskKind) ? step.taskKind : '',
+                onChange: (event)=>props.onChange(_extends({}, step, {
+                        taskKind: event.target.value
+                    })),
+                disabled: disabled,
+                error: Boolean(issues['taskKind']),
+                helperText: issues['taskKind'],
+                sx: {
+                    minWidth: {
+                        sm: 180
+                    }
+                },
+                children: OUTREACH_TASK_KINDS.map((kind)=>/*#__PURE__*/ _jsx(MenuItem, {
+                        value: kind,
+                        children: OUTREACH_TASK_KIND_LABELS[kind]
+                    }, kind))
+            }),
+            /*#__PURE__*/ _jsx(TextField, {
+                label: "Title",
+                value: step.title,
+                onChange: (event)=>props.onChange(_extends({}, step, {
+                        title: event.target.value
+                    })),
+                disabled: disabled,
+                error: Boolean(issues['title']),
+                helperText: (_issues_title = issues['title']) != null ? _issues_title : 'What the task says, for example “Connect on LinkedIn”.',
+                fullWidth: true
+            })
+        ]
+    });
+}
+export default OutreachStepCard;
+
+//# sourceMappingURL=sequence-step-card.js.map

package/src/lib/components/sequence-step-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/outreach/src/lib/components/sequence-step-card.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 {\n  mdiArrowDown,\n  mdiArrowUp,\n  mdiCodeBraces,\n  mdiTrashCanOutline,\n} from '@aglyn/shared-data-mdi'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\nimport {\n  Autocomplete,\n  Button,\n  Card,\n  CardContent,\n  FormControlLabel,\n  IconButton,\n  ListSubheader,\n  Menu,\n  MenuItem,\n  Stack,\n  Switch,\n  TextField,\n  Tooltip,\n  Typography,\n} from '@mui/material'\nimport { useRef, useState } from 'react'\nimport { OUTREACH_MERGE_FIELDS } from '../engine/sequence-validation'\nimport {\n  OUTREACH_MAX_STEP_DELAY_BUSINESS_DAYS,\n  OUTREACH_TASK_KIND_LABELS,\n  OUTREACH_TASK_KINDS,\n  type OutreachEmailStep,\n  type OutreachSequenceStep,\n  type OutreachTaskKind,\n  type OutreachTaskStep,\n} from '../model/outreach.types'\nimport type { OutreachTemplateOption } from './use-outreach-crm'\n\nexport interface OutreachStepCardProps {\n  step: OutreachSequenceStep\n  /** Its position, from 0. */\n  index: number\n  /** How many steps the sequence has, for the move controls. */\n  count: number\n  /** Whether it is the sequence's first email, which always starts the thread. */\n  firstEmail: boolean\n  /** Whether it is sent as a reply in the thread an earlier email started. */\n  inThread: boolean\n  /** The subject the thread was started with, for an in-thread email's note. */\n  threadSubject: string\n  templates: readonly OutreachTemplateOption[]\n  /** The issue to show beside each field, by the field's own name. */\n  issues: Partial<Record<string, string>>\n  disabled?: boolean\n  onChange(step: OutreachSequenceStep): void\n  onMove(direction: -1 | 1): void\n  onRemove(): void\n}\n\n/** The merge fields, grouped the way the picker heads them. */\nconst FIELD_GROUPS = [\n  ...new Set(OUTREACH_MERGE_FIELDS.map((field) => field.group)),\n]\n\n/**\n * One step of the sequence editor (AGL-2980): an email — subject, body or a\n * CRM template, merge fields, the wait before it — or a task for the rep.\n */\nexport function OutreachStepCard(props: OutreachStepCardProps) {\n  const { step, index, count, disabled } = props\n  const title =\n    step.kind === 'email'\n      ? `Step ${index + 1} · Email`\n      : `Step ${index + 1} · ${OUTREACH_TASK_KIND_LABELS[(step as OutreachTaskStep).taskKind] ?? 'Task'}`\n  return (\n    <Card variant=\"outlined\" component=\"section\" aria-label={title}>\n      <CardContent>\n        <Stack spacing={2}>\n          <Stack direction=\"row\" spacing={1} sx={{ alignItems: 'center' }}>\n            <Typography variant=\"subtitle1\" sx={{ flexGrow: 1 }}>\n              {title}\n            </Typography>\n            <Tooltip title=\"Move up\">\n              <span>\n                <IconButton\n                  size=\"small\"\n                  aria-label={`Move step ${index + 1} up`}\n                  disabled={disabled || index === 0}\n                  onClick={() => props.onMove(-1)}\n                >\n                  <MdiIcon path={mdiArrowUp.path} fontSize=\"small\" />\n                </IconButton>\n              </span>\n            </Tooltip>\n            <Tooltip title=\"Move down\">\n              <span>\n                <IconButton\n                  size=\"small\"\n                  aria-label={`Move step ${index + 1} down`}\n                  disabled={disabled || index === count - 1}\n                  onClick={() => props.onMove(1)}\n                >\n                  <MdiIcon path={mdiArrowDown.path} fontSize=\"small\" />\n                </IconButton>\n              </span>\n            </Tooltip>\n            <Tooltip title=\"Remove\">\n              <span>\n                <IconButton\n                  size=\"small\"\n                  aria-label={`Remove step ${index + 1}`}\n                  disabled={disabled || count === 1}\n                  onClick={props.onRemove}\n                >\n                  <MdiIcon path={mdiTrashCanOutline.path} fontSize=\"small\" />\n                </IconButton>\n              </span>\n            </Tooltip>\n          </Stack>\n          <DelayField {...props} />\n          {step.kind === 'email' ? (\n            <EmailStepFields {...props} step={step} />\n          ) : step.kind === 'task' ? (\n            <TaskStepFields {...props} step={step} />\n          ) : (\n            <Typography variant=\"body2\" color=\"error\">\n              {props.issues['step'] ?? 'A step is an email or a task.'}\n            </Typography>\n          )}\n        </Stack>\n      </CardContent>\n    </Card>\n  )\n}\nOutreachStepCard.displayName = 'OutreachStepCard'\n\nfunction DelayField(props: OutreachStepCardProps) {\n  const { step, index, disabled } = props\n  const first = index === 0\n  const issue = props.issues['delayBusinessDays']\n  return (\n    <TextField\n      type=\"number\"\n      label={\n        first\n          ? 'Wait after enrolling (business days)'\n          : 'Wait after the step before (business days)'\n      }\n      value={\n        Number.isFinite(step.delayBusinessDays) ? step.delayBusinessDays : ''\n      }\n      onChange={(event) =>\n        props.onChange({\n          ...step,\n          delayBusinessDays:\n            event.target.value === '' ? Number.NaN : Number(event.target.value),\n        })\n      }\n      disabled={disabled}\n      error={Boolean(issue)}\n      helperText={\n        issue ??\n        (first\n          ? '0 sends at the next opening of the sending hours.'\n          : 'Counted in the mailbox’s timezone, skipping weekends.')\n      }\n      slotProps={{\n        htmlInput: {\n          min: 0,\n          max: OUTREACH_MAX_STEP_DELAY_BUSINESS_DAYS,\n          step: 1,\n        },\n      }}\n      sx={{ maxWidth: { sm: 360 } }}\n    />\n  )\n}\n\nfunction EmailStepFields(\n  props: OutreachStepCardProps & { step: OutreachEmailStep },\n) {\n  const { step, disabled, issues } = props\n  const subjectRef = useRef<HTMLInputElement | null>(null)\n  const bodyRef = useRef<HTMLTextAreaElement | null>(null)\n  const lastFocused = useRef<'subject' | 'body'>('body')\n  const [fieldsAnchor, setFieldsAnchor] = useState<HTMLElement | null>(null)\n  const template =\n    props.templates.find((option) => option.id === step.templateId) ?? null\n  const showSubject = !props.inThread\n\n  /** Puts `{{key}}` where the caret was in the field last focused. */\n  const insertField = (key: string) => {\n    setFieldsAnchor(null)\n    const token = `{{${key}}}`\n    const target =\n      lastFocused.current === 'subject' && showSubject\n        ? 'subject'\n        : template\n          ? null\n          : 'body'\n    if (!target) return\n    const element = target === 'subject' ? subjectRef.current : bodyRef.current\n    const value = step[target]\n    const start = element?.selectionStart ?? value.length\n    const end = element?.selectionEnd ?? value.length\n    props.onChange({\n      ...step,\n      [target]: `${value.slice(0, start)}${token}${value.slice(end)}`,\n    })\n    requestAnimationFrame(() => {\n      element?.focus()\n      element?.setSelectionRange(start + token.length, start + token.length)\n    })\n  }\n\n  return (\n    <Stack spacing={2}>\n      {props.firstEmail ? null : (\n        <FormControlLabel\n          control={\n            <Switch\n              checked={step.replyInThread !== false}\n              onChange={(event) =>\n                props.onChange({ ...step, replyInThread: event.target.checked })\n              }\n              disabled={disabled}\n            />\n          }\n          label=\"Reply in the same thread\"\n        />\n      )}\n      {showSubject ? (\n        <TextField\n          label=\"Subject\"\n          value={step.subject}\n          inputRef={subjectRef}\n          onFocus={() => (lastFocused.current = 'subject')}\n          onChange={(event) =>\n            props.onChange({ ...step, subject: event.target.value })\n          }\n          disabled={disabled}\n          error={Boolean(issues['subject'])}\n          helperText={issues['subject']}\n          fullWidth\n        />\n      ) : (\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          {props.threadSubject\n            ? `Sent as a reply: “Re: ${props.threadSubject}”.`\n            : 'Sent as a reply in the thread the earlier email started.'}\n        </Typography>\n      )}\n      <Autocomplete<OutreachTemplateOption>\n        options={[...props.templates]}\n        value={template}\n        getOptionLabel={(option) => option.name}\n        isOptionEqualToValue={(option, value) => option.id === value.id}\n        onChange={(_event, next) =>\n          props.onChange({\n            ...step,\n            templateId: next?.id ?? null,\n            body: next ? '' : step.body,\n          })\n        }\n        disabled={disabled}\n        renderInput={(params) => (\n          <TextField\n            {...params}\n            label=\"CRM email template\"\n            helperText={\n              template\n                ? 'The template’s body is sent; this step’s own subject is the one used.'\n                : 'Optional. Pick one to send its body instead of writing it here.'\n            }\n          />\n        )}\n      />\n      {template ? (\n        <TextField\n          label=\"Body (from the template)\"\n          value={template.body}\n          multiline\n          minRows={4}\n          fullWidth\n          disabled\n        />\n      ) : (\n        <TextField\n          label=\"Body\"\n          value={step.body}\n          inputRef={bodyRef}\n          onFocus={() => (lastFocused.current = 'body')}\n          onChange={(event) =>\n            props.onChange({ ...step, body: event.target.value })\n          }\n          disabled={disabled}\n          error={Boolean(issues['body'])}\n          helperText={issues['body']}\n          multiline\n          minRows={6}\n          fullWidth\n        />\n      )}\n      <Stack direction=\"row\" spacing={1}>\n        <Button\n          size=\"small\"\n          variant=\"outlined\"\n          startIcon={<MdiIcon path={mdiCodeBraces.path} fontSize=\"small\" />}\n          onClick={(event) => setFieldsAnchor(event.currentTarget)}\n          disabled={disabled || (Boolean(template) && !showSubject)}\n          aria-haspopup=\"menu\"\n        >\n          Insert field\n        </Button>\n      </Stack>\n      <Menu\n        anchorEl={fieldsAnchor}\n        open={Boolean(fieldsAnchor)}\n        onClose={() => setFieldsAnchor(null)}\n      >\n        {FIELD_GROUPS.flatMap((group) => [\n          <ListSubheader key={`group-${group}`}>{group}</ListSubheader>,\n          ...OUTREACH_MERGE_FIELDS.filter((field) => field.group === group).map(\n            (field) => (\n              <MenuItem key={field.key} onClick={() => insertField(field.key)}>\n                {field.label}\n              </MenuItem>\n            ),\n          ),\n        ])}\n      </Menu>\n    </Stack>\n  )\n}\n\nfunction TaskStepFields(\n  props: OutreachStepCardProps & { step: OutreachTaskStep },\n) {\n  const { step, disabled, issues } = props\n  return (\n    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>\n      <TextField\n        select\n        label=\"Task\"\n        value={OUTREACH_TASK_KINDS.includes(step.taskKind) ? step.taskKind : ''}\n        onChange={(event) =>\n          props.onChange({\n            ...step,\n            taskKind: event.target.value as OutreachTaskKind,\n          })\n        }\n        disabled={disabled}\n        error={Boolean(issues['taskKind'])}\n        helperText={issues['taskKind']}\n        sx={{ minWidth: { sm: 180 } }}\n      >\n        {OUTREACH_TASK_KINDS.map((kind) => (\n          <MenuItem key={kind} value={kind}>\n            {OUTREACH_TASK_KIND_LABELS[kind]}\n          </MenuItem>\n        ))}\n      </TextField>\n      <TextField\n        label=\"Title\"\n        value={step.title}\n        onChange={(event) =>\n          props.onChange({ ...step, title: event.target.value })\n        }\n        disabled={disabled}\n        error={Boolean(issues['title'])}\n        helperText={\n          issues['title'] ??\n          'What the task says, for example “Connect on LinkedIn”.'\n        }\n        fullWidth\n      />\n    </Stack>\n  )\n}\n\nexport default OutreachStepCard\n"],"names":["mdiArrowDown","mdiArrowUp","mdiCodeBraces","mdiTrashCanOutline","MdiIcon","Autocomplete","Button","Card","CardContent","FormControlLabel","IconButton","ListSubheader","Menu","MenuItem","Stack","Switch","TextField","Tooltip","Typography","useRef","useState","OUTREACH_MERGE_FIELDS","OUTREACH_MAX_STEP_DELAY_BUSINESS_DAYS","OUTREACH_TASK_KIND_LABELS","OUTREACH_TASK_KINDS","FIELD_GROUPS","Set","map","field","group","OutreachStepCard","props","step","index","count","disabled","title","kind","taskKind","variant","component","aria-label","spacing","direction","sx","alignItems","flexGrow","span","size","onClick","onMove","path","fontSize","onRemove","DelayField","EmailStepFields","TaskStepFields","color","issues","displayName","first","issue","type","label","value","Number","isFinite","delayBusinessDays","onChange","event","target","NaN","error","Boolean","helperText","slotProps","htmlInput","min","max","maxWidth","sm","subjectRef","bodyRef","lastFocused","fieldsAnchor","setFieldsAnchor","template","templates","find","option","id","templateId","showSubject","inThread","insertField","key","token","current","element","start","selectionStart","length","end","selectionEnd","slice","requestAnimationFrame","focus","setSelectionRange","firstEmail","control","checked","replyInThread","subject","inputRef","onFocus","fullWidth","threadSubject","options","getOptionLabel","name","isOptionEqualToValue","_event","next","body","renderInput","params","multiline","minRows","startIcon","currentTarget","aria-haspopup","anchorEl","open","onClose","flatMap","filter","xs","select","includes","minWidth"],"mappings":"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"}

package/src/lib/components/sequences-section.d.ts

@@ -0,0 +1,40 @@
+import { type ConsolePluginOrgMount } from '@aglyn/aglyn';
+import type { OutreachMailbox } from '../model/outreach.types';
+export interface OutreachSequencesSectionProps {
+    /** The organization the hub is mounted under; `null` until the shell knows it. */
+    orgId: string | null;
+    orgMount?: ConsolePluginOrgMount;
+    org?: Record<string, unknown> | null;
+    /** The section's own path: `/[orgSlug]/outreach/sequences`. */
+    sectionPath: string;
+    /** The path below the section: `[]`, `['new']`, `[id]` or `[id, 'enrollments']`. */
+    subpath: readonly string[];
+    /** The Mailboxes section: `/[orgSlug]/outreach/mailboxes`. */
+    mailboxesPath: string;
+    /** The Compliance section: `/[orgSlug]/outreach/compliance`. */
+    compliancePath: string;
+}
+/** The new-sequence page's segment below the section. */
+export declare const OUTREACH_NEW_SEQUENCE_SEGMENT = "new";
+/**
+ * The Sequences section (AGL-2980), and the pages below it: the list, a new
+ * sequence, and one sequence's steps and enrollments. Each is a real URL, so
+ * a sequence is a link a rep can keep and the back button walks them.
+ */
+export declare function OutreachSequencesSection(props: OutreachSequencesSectionProps): import("react").JSX.Element;
+export declare namespace OutreachSequencesSection {
+    var displayName: string;
+}
+/**
+ * Every sequence: its mailbox, its status, and how many people it enrolled
+ * and where they stand — a table on wider screens, cards on a phone.
+ */
+export declare function OutreachSequenceList(props: {
+    orgId: string;
+    sectionPath: string;
+    mailboxes: readonly OutreachMailbox[];
+}): import("react").JSX.Element;
+export declare namespace OutreachSequenceList {
+    var displayName: string;
+}
+export default OutreachSequencesSection;