@aglyn/plugins-outreach 1.0.0-beta.200 → 1.0.0-beta.201

package/src/lib/components/enrollment-detail.js

@@ -0,0 +1,870 @@
+/**
+ * @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, Fragment as _Fragment } from "react/jsx-runtime";
+import { PageHeaderRecord, pluginDocsHelp } from "@aglyn/aglyn";
+import { crmOrgRecordHref, crmRecordHref } from "@aglyn/aglyn/app-utils/console-record-links";
+import { mdiAccountCancelOutline, mdiAccountOutline, mdiAccountPlusOutline, mdiAlertCircleOutline, mdiCheckCircleOutline, mdiChevronDown, mdiChevronUp, mdiClipboardCheckOutline, mdiContentCopy, mdiCursorDefaultClickOutline, mdiEmailAlertOutline, mdiEmailOffOutline, mdiEmailOutline, mdiHandBackLeftOutline, mdiPauseCircleOutline, mdiPencilOutline, mdiPlayCircleOutline, mdiReply, mdiShieldSearch, mdiStopCircleOutline } from "@aglyn/shared-data-mdi";
+import { AppLink, CardDisplay, MdiIcon } from "@aglyn/shared-ui-jsx";
+import EmptyStateComponent from "@aglyn/shared-ui-jsx/components/empty-state.component";
+import RowActionsMenu from "@aglyn/shared-ui-jsx/components/row-actions-menu.component";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { useOrgCampaigns, useOrgMemberOptions } from "@aglyn/tenant-feature-instance";
+import { Alert, Box, Button, Card, Chip, Collapse, Divider, IconButton, Link, List, ListItem, ListItemIcon, ListItemText, Stack, Tooltip, Typography } from "@mui/material";
+import { useCallback, useMemo, useState } from "react";
+import { OUTREACH_MAIL_GATEWAY_LABELS } from "../engine/mail-gateway.js";
+import { outreachClickSummary } from "../model/enrollment-engagement.js";
+import { outreachEnrollmentFigures, outreachEnrollmentTimeline, outreachStepName } from "../model/enrollment-timeline.js";
+import { OUTREACH_ATTESTATION_KINDS, OUTREACH_ATTESTATION_LABELS } from "../model/outreach.types.js";
+import { OUTREACH_ENROLLMENT_ACTION_LABELS, outreachEnrollmentActionsFor, useOutreachEnrollmentActions } from "./enrollment-actions.js";
+import { outreachCurrentStepLabel, outreachStepIsCurated, outreachStopLabel } from "./enrollments-table.js";
+import { formatOutreachTime, OutreachEnrollmentStatusChip, OutreachLoading, OutreachLoadProblem } from "./outreach-ui.js";
+import { OutreachFigure } from "./sequence-report-card.js";
+import { useOutreachApi } from "./use-outreach-api.js";
+import { useOutreachSequence } from "./use-outreach-data.js";
+import { useOutreachEnrollment, useOutreachEnrollmentGateway, useOutreachEnrollmentHistory } from "./use-outreach-enrollment.js";
+/** Where the CRM record the person is lives — the site's own CRM when the site is known. */ export function outreachCrmRecordHref(kind, id, hostId, orgMount) {
+    var _orgMount_hosts_find;
+    if (!id || !(orgMount == null ? void 0 : orgMount.orgSlug)) return null;
+    const host = (_orgMount_hosts_find = orgMount.hosts.find((entry)=>entry.id === hostId)) == null ? void 0 : _orgMount_hosts_find.subdomain;
+    return host ? crmRecordHref({
+        orgSlug: orgMount.orgSlug,
+        host
+    }, kind, id) : crmOrgRecordHref(orgMount.orgSlug, kind, id);
+}
+/** A Gmail thread, opened in the mailbox's own account. */ export function outreachGmailThreadUrl(threadId, mailboxEmail) {
+    const account = mailboxEmail ? `?authuser=${encodeURIComponent(mailboxEmail)}` : '';
+    return `https://mail.google.com/mail/${account}#all/${encodeURIComponent(threadId)}`;
+}
+const KIND_ICONS = {
+    enrolled: mdiAccountPlusOutline,
+    curated: mdiPencilOutline,
+    sent: mdiEmailOutline,
+    task: mdiClipboardCheckOutline,
+    click: mdiCursorDefaultClickOutline,
+    scanner: mdiShieldSearch,
+    'earlier-clicks': mdiCursorDefaultClickOutline,
+    paused: mdiPauseCircleOutline,
+    resumed: mdiPlayCircleOutline,
+    stopped: mdiStopCircleOutline,
+    'do-not-contact': mdiAccountCancelOutline,
+    replied: mdiReply,
+    bounced: mdiEmailAlertOutline,
+    'opted-out': mdiEmailOffOutline,
+    held: mdiHandBackLeftOutline,
+    released: mdiPlayCircleOutline,
+    failed: mdiAlertCircleOutline,
+    finished: mdiCheckCircleOutline
+};
+const TONE_COLORS = {
+    default: 'text.secondary',
+    success: 'success.main',
+    info: 'info.main',
+    warning: 'warning.main',
+    error: 'error.main'
+};
+/** A destination, whole, opening in a new tab. */ function Destination(props) {
+    return /*#__PURE__*/ _jsxs(Typography, {
+        variant: "body2",
+        component: "span",
+        sx: {
+            display: 'block',
+            wordBreak: 'break-all'
+        },
+        children: [
+            props.label ? `${props.label}: ` : null,
+            /*#__PURE__*/ _jsx(Link, {
+                href: props.url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                underline: "hover",
+                children: props.url
+            })
+        ]
+    });
+}
+/** One line of the timeline. */ function TimelineRow(props) {
+    const { entry } = props;
+    return /*#__PURE__*/ _jsxs(ListItem, {
+        alignItems: "flex-start",
+        divider: props.divider,
+        disableGutters: true,
+        "data-kind": entry.kind,
+        children: [
+            /*#__PURE__*/ _jsx(ListItemIcon, {
+                sx: {
+                    minWidth: 36,
+                    mt: 0.75,
+                    color: TONE_COLORS[entry.tone]
+                },
+                children: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: KIND_ICONS[entry.kind].path,
+                    fontSize: "small"
+                })
+            }),
+            /*#__PURE__*/ _jsx(ListItemText, {
+                disableTypography: true,
+                primary: /*#__PURE__*/ _jsxs(Stack, {
+                    direction: {
+                        xs: 'column',
+                        sm: 'row'
+                    },
+                    spacing: {
+                        xs: 0,
+                        sm: 1
+                    },
+                    sx: {
+                        justifyContent: 'space-between',
+                        alignItems: {
+                            sm: 'baseline'
+                        }
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            sx: {
+                                fontWeight: 500
+                            },
+                            children: entry.title
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "text.secondary",
+                            sx: {
+                                whiteSpace: 'nowrap'
+                            },
+                            children: formatOutreachTime(entry.atMs, props.timeZone)
+                        })
+                    ]
+                }),
+                secondary: /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 0.25,
+                    sx: {
+                        mt: 0.25
+                    },
+                    children: [
+                        entry.url ? /*#__PURE__*/ _jsx(Destination, {
+                            url: entry.url,
+                            label: entry.urlLabel
+                        }) : null,
+                        entry.detail ? /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            sx: {
+                                whiteSpace: 'pre-wrap',
+                                wordBreak: 'break-word'
+                            },
+                            children: entry.detail
+                        }) : null,
+                        entry.facts.length || entry.gmailThreadId ? /*#__PURE__*/ _jsxs(Typography, {
+                            variant: "caption",
+                            color: "text.secondary",
+                            component: "div",
+                            children: [
+                                entry.facts.join(' · '),
+                                entry.gmailThreadId ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                    children: [
+                                        entry.facts.length ? ' · ' : null,
+                                        /*#__PURE__*/ _jsx(Link, {
+                                            href: outreachGmailThreadUrl(entry.gmailThreadId, props.mailboxEmail),
+                                            target: "_blank",
+                                            rel: "noopener noreferrer",
+                                            underline: "hover",
+                                            children: "Open thread in Gmail"
+                                        })
+                                    ]
+                                }) : null
+                            ]
+                        }) : null
+                    ]
+                })
+            })
+        ]
+    });
+}
+/** One fact of the Details list. */ function Fact(props) {
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                component: "dt",
+                variant: "body2",
+                color: "text.secondary",
+                children: props.label
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                component: "dd",
+                sx: {
+                    m: 0,
+                    minWidth: 0,
+                    typography: 'body2',
+                    wordBreak: 'break-word'
+                },
+                children: props.children
+            })
+        ]
+    });
+}
+/** What mail from the sequence's sending domain met at the person's domain, in a line. */ function gatewaySentence(answer, timeZone) {
+    const { intel, standing } = answer;
+    if (!intel) return 'Could not be looked up';
+    if (intel.status === 'no_mx' || intel.status === 'null_mx') {
+        var _answer_domain;
+        return `${(_answer_domain = answer.domain) != null ? _answer_domain : 'The domain'} takes no mail · looked up ${formatOutreachTime(intel.resolvedAtMs, timeZone)}`;
+    }
+    const from = answer.sendingDomain ? ` from ${answer.sendingDomain}` : '';
+    const parts = [
+        OUTREACH_MAIL_GATEWAY_LABELS[intel.gateway],
+        intel.mx.length ? `MX ${intel.mx.join(', ')}` : 'no MX; delivered to its address record',
+        standing ? `${standing.delivered30} delivered, ${standing.blocked30} refused${from} in the last 30 days` : null,
+        `looked up ${formatOutreachTime(intel.resolvedAtMs, timeZone)}`
+    ];
+    return parts.filter(Boolean).join(' · ');
+}
+/**
+ * Everything else the enrollment holds, all of it, behind one toggle.
+ */ function EnrollmentDetails(props) {
+    var _enrollment_stepOverrides;
+    var _enrollment_campaignIds, _enrollment_engagement, _enrollment_engagement1;
+    const { enrollment, sequence, memberName, timeZone } = props;
+    const { enqueueSnackbar } = useSnackbar();
+    const time = (ms)=>formatOutreachTime(ms, timeZone);
+    const leadHref = outreachCrmRecordHref('lead', enrollment.leadId, enrollment.hostId, props.orgMount);
+    const contactHref = outreachCrmRecordHref('contact', enrollment.contactId, enrollment.hostId, props.orgMount);
+    const clicks = outreachClickSummary(enrollment.engagement);
+    const overrides = Object.entries((_enrollment_stepOverrides = enrollment.stepOverrides) != null ? _enrollment_stepOverrides : {}).sort(([a], [b])=>Number(a) - Number(b));
+    const attested = OUTREACH_ATTESTATION_KINDS.filter((kind)=>{
+        var _enrollment_attestations;
+        return (_enrollment_attestations = enrollment.attestations) == null ? void 0 : _enrollment_attestations[kind];
+    });
+    const threads = enrollment.gmailThreadIds.length ? enrollment.gmailThreadIds : enrollment.gmailThreadId ? [
+        enrollment.gmailThreadId
+    ] : [];
+    const copyId = ()=>{
+        var _navigator_clipboard;
+        void ((_navigator_clipboard = navigator.clipboard) == null ? void 0 : _navigator_clipboard.writeText(enrollment.id).then(()=>enqueueSnackbar('Enrollment id copied.', {
+                variant: 'success'
+            })).catch(()=>enqueueSnackbar('The id could not be copied.', {
+                variant: 'error'
+            })));
+    };
+    const link = (href, label)=>href ? /*#__PURE__*/ _jsx(Link, _extends({}, {
+            component: AppLink,
+            componentVariant: 'naked'
+        }, {
+            href: href,
+            underline: "hover",
+            children: label
+        })) : label;
+    return /*#__PURE__*/ _jsxs(Box, {
+        component: "dl",
+        sx: {
+            m: 0,
+            display: 'grid',
+            gridTemplateColumns: {
+                xs: '1fr',
+                sm: 'minmax(160px, 220px) 1fr'
+            },
+            columnGap: 2,
+            rowGap: 1.25
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Fact, {
+                label: "Personal line",
+                children: enrollment.personalLine ? /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    sx: {
+                        whiteSpace: 'pre-wrap'
+                    },
+                    children: enrollment.personalLine
+                }) : '—'
+            }),
+            /*#__PURE__*/ _jsx(Fact, {
+                label: "Enrolled as",
+                children: enrollment.target === 'lead' ? link(leadHref, 'Lead') : enrollment.leadId ? /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        link(contactHref, 'Contact'),
+                        ', converted from a ',
+                        link(leadHref, 'lead')
+                    ]
+                }) : link(contactHref, 'Contact')
+            }),
+            /*#__PURE__*/ _jsx(Fact, {
+                label: "Enrolled",
+                children: `${time(enrollment.createdAtMs)}${enrollment.enrolledByUid ? ` by ${memberName(enrollment.enrolledByUid)}` : ''}`
+            }),
+            /*#__PURE__*/ _jsx(Fact, {
+                label: "Cold contact",
+                children: enrollment.cold ? 'Yes — no inbound capture behind them, so the member confirmed the address before enrolling' : 'No'
+            }),
+            /*#__PURE__*/ _jsx(Fact, {
+                label: "Attestations",
+                children: attested.length ? /*#__PURE__*/ _jsx(Stack, {
+                    component: "ul",
+                    spacing: 0.25,
+                    sx: {
+                        m: 0,
+                        pl: 2.5
+                    },
+                    children: attested.map((kind)=>{
+                        var _ref;
+                        var _enrollment_attestations;
+                        const entry = (_enrollment_attestations = enrollment.attestations) == null ? void 0 : _enrollment_attestations[kind];
+                        return /*#__PURE__*/ _jsx("li", {
+                            children: `${OUTREACH_ATTESTATION_LABELS[kind]} — ${memberName((_ref = entry == null ? void 0 : entry.uid) != null ? _ref : '')}, ${time(entry == null ? void 0 : entry.atMs)}`
+                        }, kind);
+                    })
+                }) : '—'
+            }),
+            /*#__PURE__*/ _jsx(Fact, {
+                label: "Mailbox",
+                children: props.mailbox ? `${props.mailbox.sendAs || props.mailbox.email}${props.mailbox.sendAs && props.mailbox.sendAs !== props.mailbox.email ? ` (${props.mailbox.email})` : ''}` : enrollment.mailboxId ? 'No longer connected' : '—'
+            }),
+            /*#__PURE__*/ _jsx(Fact, {
+                label: "Campaigns",
+                children: ((_enrollment_campaignIds = enrollment.campaignIds) == null ? void 0 : _enrollment_campaignIds.length) ? enrollment.campaignIds.map(props.campaignName).join(', ') : '—'
+            }),
+            /*#__PURE__*/ _jsx(Fact, {
+                label: "Mail gateway",
+                children: props.gateway ? gatewaySentence(props.gateway, timeZone) : props.gatewayUnread
+            }),
+            /*#__PURE__*/ _jsxs(Fact, {
+                label: "Gateway hold",
+                children: [
+                    enrollment.gatewayHold ? [
+                        OUTREACH_MAIL_GATEWAY_LABELS[enrollment.gatewayHold.gateway],
+                        enrollment.gatewayHold.heldAtMs ? `held ${time(enrollment.gatewayHold.heldAtMs)}` : 'never held',
+                        enrollment.gatewayHold.releasedAtMs ? `released ${time(enrollment.gatewayHold.releasedAtMs)}${enrollment.gatewayHold.releasedByUid ? ` by ${memberName(enrollment.gatewayHold.releasedByUid)}` : ''}` : 'not released'
+                    ].join(' · ') : '—',
+                    enrollment.gatewayDeliveredSteps ? ` (${enrollment.gatewayDeliveredSteps} of their emails counted as delivered on the gateway ledger)` : null
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Fact, {
+                label: "Clicks",
+                children: [
+                    clicks.clicks || clicks.machineClicks ? [
+                        `${clicks.clicks} by the person`,
+                        `${clicks.machineClicks} by scanners, not counted`,
+                        `${clicks.clicks - clicks.unloggedClicks + clicks.machineClicks - clicks.unloggedMachineClicks} listed one by one`,
+                        ((_enrollment_engagement = enrollment.engagement) == null ? void 0 : _enrollment_engagement.firstClickAtMs) ? `first ${time(enrollment.engagement.firstClickAtMs)}` : null,
+                        ((_enrollment_engagement1 = enrollment.engagement) == null ? void 0 : _enrollment_engagement1.lastClickAtMs) ? `last ${time(enrollment.engagement.lastClickAtMs)}` : null
+                    ].filter(Boolean).join(' · ') : '—',
+                    clicks.followed.length ? /*#__PURE__*/ _jsx(Box, {
+                        sx: {
+                            mt: 0.5
+                        },
+                        children: clicks.followed.map((url)=>/*#__PURE__*/ _jsx(Destination, {
+                                url: url
+                            }, url))
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Fact, {
+                label: "Curated steps",
+                children: overrides.length ? /*#__PURE__*/ _jsx(Stack, {
+                    spacing: 1.5,
+                    children: overrides.map(([key, override])=>/*#__PURE__*/ _jsxs(Box, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    sx: {
+                                        fontWeight: 500
+                                    },
+                                    children: outreachStepName(sequence.steps, Number(key))
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    component: "div",
+                                    children: [
+                                        override.source === 'ai' ? override.edited ? 'AI draft, edited' : 'AI draft' : 'Written by a member',
+                                        override.draftedByUid ? `confirmed by ${memberName(override.draftedByUid)}` : null,
+                                        override.draftedAtMs ? time(override.draftedAtMs) : null,
+                                        override.model ? `model ${override.model}` : null
+                                    ].filter(Boolean).join(' · ')
+                                }),
+                                override.subject !== undefined ? /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    children: `Subject: ${override.subject}`
+                                }) : null,
+                                override.body !== undefined ? /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    sx: {
+                                        whiteSpace: 'pre-wrap',
+                                        mt: 0.5,
+                                        pl: 1.5,
+                                        borderLeft: 2,
+                                        borderColor: 'divider'
+                                    },
+                                    children: override.body
+                                }) : null,
+                                override.prompt ? /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    component: "div",
+                                    sx: {
+                                        whiteSpace: 'pre-wrap',
+                                        mt: 0.5
+                                    },
+                                    children: `Prompt: ${override.prompt}`
+                                }) : null
+                            ]
+                        }, key))
+                }) : '—'
+            }),
+            /*#__PURE__*/ _jsx(Fact, {
+                label: "Gmail threads",
+                children: threads.length ? /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 0.25,
+                    children: [
+                        threads.map((thread)=>{
+                            var _props_mailbox;
+                            return /*#__PURE__*/ _jsxs("span", {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Link, {
+                                        href: outreachGmailThreadUrl(thread, (_props_mailbox = props.mailbox) == null ? void 0 : _props_mailbox.email),
+                                        target: "_blank",
+                                        rel: "noopener noreferrer",
+                                        underline: "hover",
+                                        children: thread
+                                    }),
+                                    thread === enrollment.gmailThreadId ? ' (current)' : null
+                                ]
+                            }, thread);
+                        }),
+                        enrollment.threadSubject ? /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "text.secondary",
+                            children: `Started as “${enrollment.threadSubject}”`
+                        }) : null,
+                        enrollment.messageIds.length ? /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "text.secondary",
+                            sx: {
+                                wordBreak: 'break-all'
+                            },
+                            children: `Message-IDs in the current thread: ${enrollment.messageIds.join(' ')}`
+                        }) : null
+                    ]
+                }) : '—'
+            }),
+            /*#__PURE__*/ _jsx(Fact, {
+                label: "Stop",
+                children: enrollment.stopReason ? `${outreachStopLabel(enrollment)} · ${time(enrollment.stoppedAtMs)}${enrollment.stoppedByUid ? ` · by ${memberName(enrollment.stoppedByUid)}` : ''}` : '—'
+            }),
+            /*#__PURE__*/ _jsx(Fact, {
+                label: "Created · updated",
+                children: `${time(enrollment.createdAtMs)} · ${time(enrollment.updatedAtMs)}`
+            }),
+            /*#__PURE__*/ _jsx(Fact, {
+                label: "Enrollment id",
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 0.5,
+                    sx: {
+                        alignItems: 'center'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            sx: {
+                                fontFamily: 'monospace',
+                                wordBreak: 'break-all'
+                            },
+                            children: enrollment.id
+                        }),
+                        /*#__PURE__*/ _jsx(Tooltip, {
+                            title: "Copy the id",
+                            children: /*#__PURE__*/ _jsx(IconButton, {
+                                size: "small",
+                                "aria-label": "Copy the enrollment id",
+                                onClick: copyId,
+                                children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                    path: mdiContentCopy.path,
+                                    fontSize: "small"
+                                })
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+export function OutreachEnrollmentDetail(props) {
+    var _props_mailboxes_mailboxes_find, _ref, _ref1, _enrollment_gmailThreadId;
+    var _enrollment_campaignIds, _sequence_stats;
+    const { orgId, sectionPath, sequenceId, enrollmentId, orgMount } = props;
+    const api = useOutreachApi(orgId);
+    const loadedSequence = useOutreachSequence(orgId, sequenceId);
+    const loaded = useOutreachEnrollment(orgId, enrollmentId);
+    const history = useOutreachEnrollmentHistory(orgId, enrollmentId);
+    const gateway = useOutreachEnrollmentGateway(api, enrollmentId);
+    const roster = useOrgMemberOptions(orgId, {
+        enabled: true
+    });
+    const [detailsOpen, setDetailsOpen] = useState(false);
+    const enrollment = loaded.data;
+    const sequence = loadedSequence.data;
+    const campaigns = useOrgCampaigns(orgId, {
+        enabled: detailsOpen && Boolean(enrollment == null ? void 0 : (_enrollment_campaignIds = enrollment.campaignIds) == null ? void 0 : _enrollment_campaignIds.length)
+    });
+    const steps = useMemo(()=>{
+        var _ref;
+        return (_ref = sequence == null ? void 0 : sequence.steps) != null ? _ref : [];
+    }, [
+        sequence
+    ]);
+    const actions = useOutreachEnrollmentActions({
+        api,
+        steps
+    });
+    const memberName = useCallback((uid)=>{
+        var _ref;
+        var _roster_options_find;
+        return (_ref = (_roster_options_find = roster.options.find((option)=>option.uid === uid)) == null ? void 0 : _roster_options_find.label) != null ? _ref : 'a member';
+    }, [
+        roster.options
+    ]);
+    const campaignName = useCallback((id)=>{
+        var _ref;
+        var _campaigns_options_find;
+        return (_ref = (_campaigns_options_find = campaigns.options.find((option)=>option.value === id)) == null ? void 0 : _campaigns_options_find.label) != null ? _ref : id;
+    }, [
+        campaigns.options
+    ]);
+    const enrollmentsPath = `${sectionPath}/${sequenceId}/enrollments`;
+    const mailbox = (_props_mailboxes_mailboxes_find = props.mailboxes.mailboxes.find((entry)=>entry.id === ((enrollment == null ? void 0 : enrollment.mailboxId) || (sequence == null ? void 0 : sequence.mailboxId)))) != null ? _props_mailboxes_mailboxes_find : null;
+    const timeZone = (_ref = mailbox == null ? void 0 : mailbox.timezone) != null ? _ref : null;
+    const time = (ms)=>formatOutreachTime(ms, timeZone);
+    const timeline = useMemo(()=>{
+        var _ref;
+        var _gateway_data_intel, _gateway_data;
+        return enrollment ? outreachEnrollmentTimeline({
+            enrollment,
+            steps,
+            history: history.status === 'ready' ? history.data : null,
+            memberName,
+            formatTime: (ms)=>formatOutreachTime(ms, timeZone),
+            gateway: (_ref = (_gateway_data = gateway.data) == null ? void 0 : (_gateway_data_intel = _gateway_data.intel) == null ? void 0 : _gateway_data_intel.gateway) != null ? _ref : null
+        }) : [];
+    }, [
+        enrollment,
+        steps,
+        history,
+        memberName,
+        timeZone,
+        gateway.data
+    ]);
+    const back = /*#__PURE__*/ _jsx(Button, _extends({}, {
+        component: AppLink,
+        componentVariant: 'naked',
+        nativeButton: false
+    }, {
+        href: enrollmentsPath,
+        size: "small",
+        color: "primary",
+        children: "Back to enrollments"
+    }));
+    if (loaded.status === 'loading' || loadedSequence.status === 'loading') {
+        return /*#__PURE__*/ _jsx(OutreachLoading, {
+            label: "Loading this person…"
+        });
+    }
+    if (loaded.status === 'error' || loaded.status === 'refused') {
+        return /*#__PURE__*/ _jsx(OutreachLoadProblem, {
+            status: loaded.status,
+            what: "enrollment"
+        });
+    }
+    if (loadedSequence.status === 'error' || loadedSequence.status === 'refused') {
+        return /*#__PURE__*/ _jsx(OutreachLoadProblem, {
+            status: loadedSequence.status,
+            what: "sequence"
+        });
+    }
+    // An id from another sequence reads as not here: the URL names both.
+    if (!enrollment || !sequence || enrollment.sequenceId !== sequenceId) {
+        return /*#__PURE__*/ _jsx(Card, {
+            variant: "outlined",
+            children: /*#__PURE__*/ _jsx(EmptyStateComponent, {
+                label: "This person isn’t in this sequence",
+                description: "They may have been removed from the workspace, or the link names a different sequence.",
+                action: back
+            })
+        });
+    }
+    const name = enrollment.contactName || enrollment.email;
+    const kind = enrollment.target === 'lead' ? 'lead' : 'contact';
+    const recordHref = outreachCrmRecordHref(kind, kind === 'lead' ? enrollment.leadId : enrollment.contactId, enrollment.hostId, orgMount);
+    const figures = outreachEnrollmentFigures(enrollment);
+    const trackClicks = sequence.settings.trackClicks || ((_sequence_stats = sequence.stats) == null ? void 0 : _sequence_stats.clickTracked) === true;
+    const open = enrollment.status === 'active' || enrollment.status === 'paused';
+    const held = enrollment.status === 'paused' && enrollment.stopReason === 'gateway_blocked_here';
+    /*
+   * The one act that moves the person forward is the button: resuming a
+   * paused one, else curating the next email. Everything else is in the
+   * menu, the destructive acts included, as on every record page.
+   */ const available = outreachEnrollmentActionsFor(enrollment, steps);
+    const primary = available.includes('resume') ? 'resume' : available.includes('curate') ? 'curate' : null;
+    const menu = actions.menuItems(enrollment, (action)=>action !== primary);
+    const dash = (value)=>value ? value.toLocaleString() : '—';
+    const notTracked = !trackClicks && !figures.clicks && !figures.scannerClicks ? 'Not tracked' : undefined;
+    const thread = (_ref1 = (_enrollment_gmailThreadId = enrollment.gmailThreadId) != null ? _enrollment_gmailThreadId : enrollment.gmailThreadIds.at(-1)) != null ? _ref1 : null;
+    const nothingYet = enrollment.status === 'active' && enrollment.nextDueAtMs ? `Nothing yet — step ${enrollment.stepIndex + 1} sends ${time(enrollment.nextDueAtMs)}.` : 'Nothing yet.';
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ _jsx(PageHeaderRecord, {
+                title: name
+            }),
+            /*#__PURE__*/ _jsx(CardDisplay, {
+                header: "Enrollment",
+                subheader: /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        enrollment.contactName ? `${enrollment.email} · ` : '',
+                        `In ${sequence.name || 'Untitled'}`
+                    ]
+                }),
+                help: pluginDocsHelp('sequences', {
+                    anchor: '#person-history'
+                }),
+                contentGutterX: true,
+                contentGutterY: true,
+                HeaderProps: {
+                    action: /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        sx: {
+                            alignItems: 'center',
+                            flexWrap: 'wrap',
+                            rowGap: 1
+                        },
+                        children: [
+                            back,
+                            primary ? /*#__PURE__*/ _jsx(Button, {
+                                variant: "outlined",
+                                size: "small",
+                                disabled: actions.busy === enrollment.id,
+                                onClick: ()=>actions.choose(enrollment, primary),
+                                children: held ? 'Resume and send' : OUTREACH_ENROLLMENT_ACTION_LABELS[primary]
+                            }) : null,
+                            menu.length ? /*#__PURE__*/ _jsx(RowActionsMenu, {
+                                label: name,
+                                items: menu
+                            }) : null
+                        ]
+                    })
+                },
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 2,
+                    children: [
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            sx: {
+                                alignItems: 'center',
+                                flexWrap: 'wrap',
+                                rowGap: 1
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Tooltip, {
+                                    describeChild: true,
+                                    title: recordHref ? `Open the ${kind} in the CRM` : `The ${kind}’s record can’t be linked`,
+                                    children: /*#__PURE__*/ _jsx(Chip, _extends({
+                                        size: "small",
+                                        variant: "outlined",
+                                        color: recordHref ? 'primary' : 'default',
+                                        icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                                            path: mdiAccountOutline.path,
+                                            fontSize: "small"
+                                        }),
+                                        label: kind === 'lead' ? 'Lead' : 'Contact'
+                                    }, recordHref ? {
+                                        component: AppLink,
+                                        href: recordHref,
+                                        clickable: true,
+                                        componentVariant: 'naked'
+                                    } : {}))
+                                }),
+                                /*#__PURE__*/ _jsx(OutreachEnrollmentStatusChip, {
+                                    status: enrollment.status
+                                }),
+                                /*#__PURE__*/ _jsx(Chip, {
+                                    size: "small",
+                                    variant: "outlined",
+                                    label: outreachCurrentStepLabel(enrollment, steps)
+                                }),
+                                outreachStepIsCurated(enrollment) ? /*#__PURE__*/ _jsx(Chip, {
+                                    size: "small",
+                                    variant: "outlined",
+                                    color: "success",
+                                    label: "Curated"
+                                }) : null,
+                                open && enrollment.nextDueAtMs ? /*#__PURE__*/ _jsx(Chip, {
+                                    size: "small",
+                                    variant: "outlined",
+                                    label: `Next send ${time(enrollment.nextDueAtMs)}`
+                                }) : null
+                            ]
+                        }),
+                        held ? /*#__PURE__*/ _jsx(Alert, {
+                            severity: "warning",
+                            children: enrollment.stopDetail || 'Their mail gateway refused this sender, so the next email is held. Resume to send it anyway.'
+                        }) : null,
+                        figures.anything ? /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 3,
+                            sx: {
+                                flexWrap: 'wrap',
+                                rowGap: 2
+                            },
+                            role: "group",
+                            "aria-label": "In numbers",
+                            children: [
+                                /*#__PURE__*/ _jsx(OutreachFigure, {
+                                    label: "Emails sent",
+                                    value: dash(figures.emailsSent)
+                                }),
+                                /*#__PURE__*/ _jsx(OutreachFigure, {
+                                    label: "Clicks",
+                                    value: dash(figures.clicks),
+                                    hint: notTracked
+                                }),
+                                /*#__PURE__*/ _jsx(OutreachFigure, {
+                                    label: "Links followed",
+                                    value: figures.linksFollowed.count ? `${figures.linksFollowed.count}${figures.linksFollowed.atLeast ? '+' : ''}` : '—',
+                                    hint: notTracked != null ? notTracked : figures.linksFollowed.atLeast && figures.linksFollowed.count ? 'Earlier clicks kept the last link only' : undefined
+                                }),
+                                /*#__PURE__*/ _jsx(OutreachFigure, {
+                                    label: "Scanner clicks",
+                                    value: dash(figures.scannerClicks),
+                                    hint: notTracked != null ? notTracked : 'Not counted'
+                                }),
+                                /*#__PURE__*/ _jsx(OutreachFigure, {
+                                    label: "Replies",
+                                    value: dash(figures.replies)
+                                })
+                            ]
+                        }) : /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            children: nothingYet
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(CardDisplay, {
+                header: "Activity",
+                subheader: "Newest first",
+                help: pluginDocsHelp('sequences', {
+                    anchor: '#person-history'
+                }),
+                contentGutterX: true,
+                contentGutterY: true,
+                HeaderProps: thread ? {
+                    action: /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        href: outreachGmailThreadUrl(thread, mailbox == null ? void 0 : mailbox.email),
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        children: "Open thread in Gmail"
+                    })
+                } : undefined,
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 1,
+                    children: [
+                        history.status === 'loading' ? /*#__PURE__*/ _jsx(OutreachLoading, {
+                            label: "Loading their clicks…"
+                        }) : null,
+                        history.status === 'error' || history.status === 'refused' ? /*#__PURE__*/ _jsx(OutreachLoadProblem, {
+                            status: history.status,
+                            what: "list of their clicks",
+                            // Only the one-by-one list is missing: the totals, the sends and
+                            // every stop above come from the enrollment, which was read.
+                            message: history.status === 'refused' ? 'Their clicks can’t be listed one by one here; the numbers above still count them.' : 'Their clicks couldn’t be listed one by one. Reload the page to try again.'
+                        }) : null,
+                        /*#__PURE__*/ _jsx(List, {
+                            disablePadding: true,
+                            "aria-label": "Activity",
+                            children: timeline.map((entry, index)=>{
+                                var _ref;
+                                return /*#__PURE__*/ _jsx(TimelineRow, {
+                                    entry: entry,
+                                    timeZone: timeZone,
+                                    mailboxEmail: (_ref = mailbox == null ? void 0 : mailbox.email) != null ? _ref : null,
+                                    divider: index < timeline.length - 1
+                                }, entry.key);
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(CardDisplay, {
+                header: "Details",
+                help: pluginDocsHelp('sequences', {
+                    anchor: '#person-history'
+                }),
+                contentGutterX: true,
+                HeaderProps: {
+                    action: /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        "aria-expanded": detailsOpen,
+                        "aria-controls": "outreach-enrollment-details",
+                        endIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                            path: (detailsOpen ? mdiChevronUp : mdiChevronDown).path,
+                            fontSize: "small"
+                        }),
+                        onClick: ()=>setDetailsOpen((was)=>!was),
+                        children: detailsOpen ? 'Hide' : 'Show'
+                    })
+                },
+                children: /*#__PURE__*/ _jsx(Collapse, {
+                    in: detailsOpen,
+                    unmountOnExit: true,
+                    children: /*#__PURE__*/ _jsxs(Box, {
+                        id: "outreach-enrollment-details",
+                        sx: {
+                            pb: 2
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Divider, {
+                                sx: {
+                                    mb: 2
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(EnrollmentDetails, {
+                                enrollment: enrollment,
+                                sequence: sequence,
+                                mailbox: mailbox,
+                                gateway: gateway.status === 'ready' ? gateway.data : null,
+                                gatewayUnread: gateway.status === 'loading' ? 'Looking it up…' : gateway.status === 'refused' ? 'Your role cannot look it up' : 'Could not be looked up',
+                                campaignName: campaignName,
+                                memberName: memberName,
+                                orgMount: orgMount,
+                                timeZone: timeZone
+                            })
+                        ]
+                    })
+                })
+            }),
+            actions.dialogs
+        ]
+    });
+}
+OutreachEnrollmentDetail.displayName = 'OutreachEnrollmentDetail';
+export default OutreachEnrollmentDetail;
+
+//# sourceMappingURL=enrollment-detail.js.map