@startsimpli/integrations 0.2.46 → 0.2.48

package/src/comms/components/AudiencePanel.tsx

@@ -0,0 +1,221 @@
+/**
+ * Per-send audience for one pending draft (bd startsim-xkcnk): who receives it,
+ * narrowed by activity, signup dates and a segment the foundry's own backend
+ * defines, minus explicit exclusions. Shows the recipient count, a sample and an
+ * "excluded and why" breakdown before anyone approves; "Save audience" stores it
+ * on the draft. A segment can only narrow the foundry's customers.
+ */
+import { useEffect, useMemo, useRef, useState, type ReactElement } from 'react';
+import { Button, Input, Label, Textarea } from '@startsimpli/ui';
+
+import type { CommsApi } from '../api/comms';
+import { useAudienceSegments, useDraftAudience, usePreviewAudience, useSaveAudience } from '../hooks/index';
+import type { AudiencePreview, AudienceSegment, AudienceSpec, ExcludedReason } from '../types/index';
+import { ErrorNotice, NativeSelect, Note, useFieldId } from './_shared';
+
+const DEFAULT_DAYS = 14;
+const DEBOUNCE_MS = 250;
+
+const REASON_LABEL: Record<ExcludedReason, string> = {
+  no_email: 'with no email address',
+  excluded: 'excluded by you',
+  excluded_segment: 'in the excluded segment',
+  undeliverable: 'with an undeliverable address',
+  unverified: 'with an unverified email',
+  opted_out: 'unsubscribed',
+  suppressed: 'suppressed (bounce or complaint)',
+};
+
+interface Form {
+  base: 'all' | 'active' | 'inactive';
+  days: string;
+  after: string;
+  before: string;
+  segment: string;
+  excludeSegment: string;
+  exclude: string;
+}
+
+function toForm(spec: AudienceSpec): Form {
+  return {
+    base: spec.base ?? 'all',
+    days: String(spec.days ?? DEFAULT_DAYS),
+    after: (spec.joined_after ?? '').slice(0, 10),
+    before: (spec.joined_before ?? '').slice(0, 10),
+    segment: spec.segment?.key ?? '',
+    excludeSegment: spec.exclude?.segment?.key ?? '',
+    exclude: (spec.exclude?.emails ?? []).join('\n'),
+  };
+}
+
+export function parseEmails(text: string): string[] {
+  return [...new Set(text.split(/[\s,;]+/).map((e) => e.trim().toLowerCase()).filter(Boolean))];
+}
+
+export function toSpec(f: Form): AudienceSpec {
+  const spec: AudienceSpec = { base: f.base };
+  if (f.base !== 'all') spec.days = Math.max(1, Math.floor(Number(f.days)) || DEFAULT_DAYS);
+  if (f.after) spec.joined_after = f.after;
+  if (f.before) spec.joined_before = f.before;
+  if (f.segment) spec.segment = { key: f.segment };
+  const emails = parseEmails(f.exclude);
+  if (emails.length || f.excludeSegment) {
+    spec.exclude = {};
+    if (emails.length) spec.exclude.emails = emails;
+    if (f.excludeSegment) spec.exclude.segment = { key: f.excludeSegment };
+  }
+  return spec;
+}
+
+function Summary({ preview }: { preview: AudiencePreview }) {
+  const reasons = Object.entries(preview.excluded).filter(([, n]) => n) as [ExcludedReason, number][];
+  return (
+    <div className="space-y-2 rounded-md bg-muted/40 p-3 text-sm" aria-live="polite">
+      <p className="font-medium">
+        {preview.count} {preview.count === 1 ? 'person' : 'people'} will receive this
+      </p>
+      {preview.sample.length ? (
+        <ul className="flex flex-wrap gap-x-3 text-xs text-muted-foreground">
+          {preview.sample.map((e) => (
+            <li key={e}>{e}</li>
+          ))}
+        </ul>
+      ) : null}
+      {preview.excluded_total ? (
+        <div>
+          <p>{preview.excluded_total} excluded</p>
+          <ul className="list-disc pl-5 text-muted-foreground">
+            {reasons.map(([reason, n]) => (
+              <li key={reason}>
+                {n} {REASON_LABEL[reason] ?? reason}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function SegmentSelect({ id, label, value, onChange, segments, none }: {
+  id: string; label: string; value: string; onChange: (v: string) => void; segments: AudienceSegment[]; none: string;
+}) {
+  return (
+    <div className="space-y-1">
+      <Label htmlFor={id}>{label}</Label>
+      <NativeSelect id={id} value={value} onChange={(e) => onChange(e.target.value)}>
+        <option value="">{none}</option>
+        {segments.map((s) => (
+          <option key={s.key} value={s.key}>{s.label}</option>
+        ))}
+      </NativeSelect>
+    </div>
+  );
+}
+
+function AudienceForm({ api, draftId }: { api: CommsApi; draftId: string }) {
+  const prefix = useFieldId(`comms-audience-${draftId}`);
+  const loaded = useDraftAudience(api, draftId, true);
+  const segments = useAudienceSegments(api, true);
+  const previewMut = usePreviewAudience(api, draftId);
+  const save = useSaveAudience(api, draftId);
+  const [form, setForm] = useState<Form | null>(null);
+  const [shown, setShown] = useState<AudiencePreview | null>(null);
+  const initial = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (loaded.data && form === null) {
+      setForm(toForm(loaded.data.audience));
+      setShown(loaded.data.preview);
+      initial.current = JSON.stringify(toSpec(toForm(loaded.data.audience)));
+    }
+  }, [loaded.data, form]);
+
+  const spec = useMemo(() => (form ? toSpec(form) : null), [form]);
+  const specKey = spec ? JSON.stringify(spec) : null;
+  const { mutate } = previewMut;
+  useEffect(() => {
+    if (!spec || specKey === initial.current) return;
+    const t = setTimeout(() => {
+      mutate(spec, {
+        onSuccess: (d) => { setShown(d.preview); },
+        onError: () => setShown(null),
+      });
+    }, DEBOUNCE_MS);
+    return () => clearTimeout(t);
+    // spec is derived from specKey
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [specKey, mutate]);
+
+  if (loaded.error) return <ErrorNotice error={loaded.error} />;
+  if (!form || !spec) return <Note>Loading the audience…</Note>;
+  const set = (patch: Partial<Form>) => setForm({ ...form, ...patch });
+  const dirty = specKey !== initial.current;
+  const available = segments.data?.available ?? false;
+  const list = segments.data?.segments ?? [];
+
+  return (
+    <div className="space-y-3">
+      {loaded.data?.is_default && !dirty ? <Note>Using the program default. Change anything below to set this send's own audience.</Note> : null}
+      <div className="flex flex-wrap items-end gap-3">
+        <div className="space-y-1">
+          <Label htmlFor={`${prefix}-who`}>Who</Label>
+          <NativeSelect id={`${prefix}-who`} value={form.base} onChange={(e) => set({ base: e.target.value as Form['base'] })}>
+            <option value="all">Everyone</option>
+            <option value="active">Seen recently</option>
+            <option value="inactive">Not seen for a while</option>
+          </NativeSelect>
+        </div>
+        {form.base !== 'all' ? (
+          <div className="space-y-1">
+            <Label htmlFor={`${prefix}-days`}>Within days</Label>
+            <Input id={`${prefix}-days`} type="number" min={1} className="w-24" value={form.days} onChange={(e) => set({ days: e.target.value })} />
+          </div>
+        ) : null}
+        <div className="space-y-1">
+          <Label htmlFor={`${prefix}-after`}>Signed up after</Label>
+          <Input id={`${prefix}-after`} type="date" value={form.after} onChange={(e) => set({ after: e.target.value })} />
+        </div>
+        <div className="space-y-1">
+          <Label htmlFor={`${prefix}-before`}>Signed up before</Label>
+          <Input id={`${prefix}-before`} type="date" value={form.before} onChange={(e) => set({ before: e.target.value })} />
+        </div>
+      </div>
+      {available ? (
+        <div className="flex flex-wrap gap-3">
+          <SegmentSelect id={`${prefix}-seg`} label="Only people in segment" value={form.segment}
+            onChange={(v) => set({ segment: v })} segments={list} none="Everyone (no segment)" />
+          <SegmentSelect id={`${prefix}-xseg`} label="Never send to segment" value={form.excludeSegment}
+            onChange={(v) => set({ excludeSegment: v })} segments={list} none="None" />
+        </div>
+      ) : segments.data ? (
+        <Note>Segments need the foundry's own backend, which is not deployed yet. Activity and signup date still work.</Note>
+      ) : null}
+      <ErrorNotice error={segments.error} />
+      <div className="space-y-1">
+        <Label htmlFor={`${prefix}-exclude`}>Never send to</Label>
+        <Textarea id={`${prefix}-exclude`} rows={3} placeholder="One email address per line"
+          value={form.exclude} onChange={(e) => set({ exclude: e.target.value })} />
+      </div>
+      {shown ? <Summary preview={shown} /> : null}
+      {previewMut.isPending ? <Note>Counting…</Note> : null}
+      <ErrorNotice error={previewMut.error ?? save.error} />
+      <div className="flex items-center gap-2">
+        <Button type="button" size="sm" disabled={save.isPending || !dirty}
+          onClick={() => save.mutate(spec, { onSuccess: () => { initial.current = specKey; setForm({ ...form }); } })}>
+          Save audience
+        </Button>
+        {save.isSuccess && !dirty ? <span className="text-sm text-muted-foreground">Saved.</span> : null}
+      </div>
+    </div>
+  );
+}
+
+/** The open panel; the draft row owns the "Audience" button that shows it. */
+export function AudiencePanel({ api, draftId, id }: { api: CommsApi; draftId: string; id?: string }): ReactElement {
+  return (
+    <div id={id} role="region" aria-label="Audience" className="mt-2 space-y-3 rounded-md border p-3">
+      <AudienceForm api={api} draftId={draftId} />
+    </div>
+  );
+}

package/src/comms/components/DraftReview.tsx

@@ -14,14 +14,18 @@ import {
   DEFAULT_POLL_MS,
   useApproveDraft,
   useDiscardDraft,
+  useRetryDraft,
   useDraftPreview,
   useDrafts,
   useSendTest,
   useUpdateDraft,
 } from '../hooks/index';
-import type { Draft, DraftPatch } from '../types/index';
+import type { Draft, DraftAction, DraftPatch } from '../types/index';
+import { AudiencePanel } from './AudiencePanel';
 import { EmailPreview } from './EmailPreview';
-import { ErrorNotice, Note, formatDate, humanize, useFieldId } from './_shared';
+import { SchedulePicker } from './SchedulePicker';
+import { ScheduledSends } from './ScheduledSends';
+import { ErrorNotice, Note, formatDate, formatDateTime, humanize, useFieldId } from './_shared';
 
 export interface DraftReviewProps {
   api: CommsApi;
@@ -78,14 +82,36 @@ function DraftEditor({ api, draft, onDone }: { api: CommsApi; draft: Draft; onDo
   );
 }
 
-function DraftItem({ api, draft }: { api: CommsApi; draft: Draft }) {
+/** The actions the server says are open; older servers send none, which means the pending set. */
+function allowed(draft: Draft, action: DraftAction): boolean {
+  if (!draft.next_actions) return action !== 'retry';
+  return draft.next_actions.includes(action);
+}
+
+export function DraftItem({
+  api,
+  draft,
+  onSentImmediately,
+}: {
+  api: CommsApi;
+  draft: Draft;
+  onSentImmediately?: (draft: Draft) => void;
+}) {
   const [editing, setEditing] = useState(false);
   const [previewing, setPreviewing] = useState(false);
+  const [auditing, setAuditing] = useState(false);
+  const [scheduling, setScheduling] = useState(false);
   const ready = !draft.generating && !draft.error;
   const preview = useDraftPreview(api, draft.id, previewing && ready);
   const sendTest = useSendTest(api);
   const approve = useApproveDraft(api);
   const discard = useDiscardDraft(api);
+  const retry = useRetryDraft(api);
+  const approveWith = (vars: Parameters<typeof approve.mutateAsync>[0], done?: () => void) =>
+    approve.mutateAsync(vars).then((d) => {
+      if (d.sent_immediately) onSentImmediately?.(d);
+      done?.();
+    }, () => undefined);
 
   return (
     <li className="py-3">
@@ -98,7 +124,20 @@ function DraftItem({ api, draft }: { api: CommsApi; draft: Draft }) {
           {ready ? (
             <>
               <Button type="button" size="sm" variant="outline" onClick={() => setPreviewing((v) => !v)}>Preview</Button>
-              <Button type="button" size="sm" variant="outline" onClick={() => setEditing((v) => !v)}>Edit</Button>
+              {allowed(draft, 'edit') ? (
+                <>
+                  <Button type="button" size="sm" variant="outline" onClick={() => setEditing((v) => !v)}>Edit</Button>
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="outline"
+                    aria-expanded={auditing}
+                    onClick={() => setAuditing((v) => !v)}
+                  >
+                    Audience
+                  </Button>
+                </>
+              ) : null}
               <Button
                 type="button"
                 size="sm"
@@ -108,12 +147,24 @@ function DraftItem({ api, draft }: { api: CommsApi; draft: Draft }) {
               >
                 Send test to me
               </Button>
-              <Button type="button" size="sm" disabled={approve.isPending} onClick={() => approve.mutate(draft.id)}>
-                Approve and send
-              </Button>
+              {allowed(draft, 'approve') ? (
+                <Button type="button" size="sm" disabled={approve.isPending} onClick={() => approveWith(draft.id)}>
+                  Approve and send
+                </Button>
+              ) : null}
+              {allowed(draft, 'schedule') ? (
+                <Button type="button" size="sm" variant="outline" onClick={() => setScheduling((v) => !v)}>
+                  Schedule…
+                </Button>
+              ) : null}
+              {allowed(draft, 'retry') ? (
+                <Button type="button" size="sm" disabled={retry.isPending} onClick={() => retry.mutate(draft.id)}>
+                  Retry
+                </Button>
+              ) : null}
             </>
           ) : null}
-          {!draft.generating ? (
+          {!draft.generating && allowed(draft, 'discard') ? (
             <Button type="button" size="sm" variant="ghost" disabled={discard.isPending} onClick={() => discard.mutate(draft.id)}>
               Discard
             </Button>
@@ -125,38 +176,100 @@ function DraftItem({ api, draft }: { api: CommsApi; draft: Draft }) {
       {sendTest.data && !sendTest.data.sent ? (
         <ErrorNotice error={new Error(`Test not sent: ${humanize(sendTest.data.reason || 'refused')}`)} />
       ) : null}
-      <ErrorNotice error={sendTest.error ?? approve.error ?? discard.error ?? preview.error} />
+      {draft.failure ? <ErrorNotice error={new Error(`Send failed: ${draft.failure.reason}`)} /> : null}
+      {draft.notice ? (
+        <Note>
+          {draft.notice.code === 'expired' && draft.notice.send_at
+            ? `${draft.notice.reason}. It was scheduled for ${formatDateTime(draft.notice.send_at)}.`
+            : draft.notice.reason}
+        </Note>
+      ) : null}
+      <ErrorNotice error={sendTest.error ?? approve.error ?? discard.error ?? retry.error ?? preview.error} />
       {editing && ready ? <DraftEditor api={api} draft={draft} onDone={() => setEditing(false)} /> : null}
+      {auditing && ready ? <AudiencePanel api={api} draftId={draft.id} /> : null}
       {previewing && preview.data ? <EmailPreview email={preview.data} /> : null}
+      {scheduling && ready ? (
+        <SchedulePicker
+          submitLabel="Approve and schedule"
+          pending={approve.isPending}
+          onCancel={() => setScheduling(false)}
+          onSubmit={(s) => approveWith({ id: draft.id, ...s }, () => setScheduling(false))}
+        />
+      ) : null}
+      {draft.cancelled_at ? <Note>{`Schedule cancelled ${formatDateTime(draft.cancelled_at)}.`}</Note> : null}
     </li>
   );
 }
 
+/** Expired and failed drafts: each states why and offers its next action. */
+function NeedsAttention({ api, pollIntervalMs, onSentImmediately }: {
+  api: CommsApi;
+  pollIntervalMs: number;
+  onSentImmediately: (draft: Draft) => void;
+}): ReactElement | null {
+  const expired = useDrafts(api, { status: 'expired', page: 1, page_size: 50 }, pollIntervalMs);
+  const failed = useDrafts(api, { status: 'failed', page: 1, page_size: 50 }, pollIntervalMs);
+  const rows = [...(failed.data?.results ?? []), ...(expired.data?.results ?? [])];
+  if (!rows.length) return null;
+  return (
+    <div className="space-y-1">
+      <h3 className="text-sm font-medium">Needs attention</h3>
+      <ul className="divide-y">
+        {rows.map((d) => (
+          <DraftItem key={d.id} api={api} draft={d} onSentImmediately={onSentImmediately} />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
 export function DraftReview({ api, pollIntervalMs = DEFAULT_POLL_MS, pageSize = 10 }: DraftReviewProps): ReactElement | null {
   const [page, setPage] = useState(1);
+  const [justSent, setJustSent] = useState<Draft | null>(null);
   const drafts = useDrafts(api, { status: 'pending', page, page_size: pageSize }, pollIntervalMs);
   if (drafts.error) return <ErrorNotice error={drafts.error} />;
   if (!drafts.data) return null;
   const { results, count } = drafts.data;
-  if (!results.length) return <Note>No updates are waiting for approval.</Note>;
-  return (
-    <div className="space-y-1">
-      <h3 className="text-sm font-medium">Waiting for approval</h3>
-      <ul className="divide-y">
-        {results.map((d) => (
-          <DraftItem key={d.id} api={api} draft={d} />
-        ))}
-      </ul>
-      {count > pageSize ? (
-        <div className="flex items-center gap-2 text-sm">
-          <Button type="button" size="sm" variant="outline" disabled={!drafts.data.previous} onClick={() => setPage(page - 1)}>
-            Previous
-          </Button>
-          <Button type="button" size="sm" variant="outline" disabled={!drafts.data.next} onClick={() => setPage(page + 1)}>
-            Next
-          </Button>
-        </div>
+  const extras = (
+    <>
+      {justSent ? (
+        <Note>
+          {`"${justSent.subject}" was sent immediately: the requested time (${formatDateTime(justSent.requested_send_at)}) had already passed.`}
+        </Note>
       ) : null}
-    </div>
+      <NeedsAttention api={api} pollIntervalMs={pollIntervalMs} onSentImmediately={setJustSent} />
+      <ScheduledSends api={api} pollIntervalMs={pollIntervalMs} />
+    </>
+  );
+  if (!results.length) {
+    return (
+      <>
+        <Note>No updates are waiting for approval.</Note>
+        {extras}
+      </>
+    );
+  }
+  return (
+    <>
+      <div className="space-y-1">
+        <h3 className="text-sm font-medium">Waiting for approval</h3>
+        <ul className="divide-y">
+          {results.map((d) => (
+            <DraftItem key={d.id} api={api} draft={d} onSentImmediately={setJustSent} />
+          ))}
+        </ul>
+        {count > pageSize ? (
+          <div className="flex items-center gap-2 text-sm">
+            <Button type="button" size="sm" variant="outline" disabled={!drafts.data.previous} onClick={() => setPage(page - 1)}>
+              Previous
+            </Button>
+            <Button type="button" size="sm" variant="outline" disabled={!drafts.data.next} onClick={() => setPage(page + 1)}>
+              Next
+            </Button>
+          </div>
+        ) : null}
+      </div>
+      {extras}
+    </>
   );
 }

package/src/comms/components/SchedulePicker.tsx

@@ -0,0 +1,53 @@
+/**
+ * Pick when an approved draft goes out: a local date and time plus the time
+ * zone it is meant in (default: the viewer's). The server stores the instant in
+ * UTC; this form only collects the wall-clock time and the zone name.
+ */
+import { useState, type ReactElement } from 'react';
+import { Button, Input, Label } from '@startsimpli/ui';
+
+import type { ScheduleInput } from '../types/index';
+import { NativeSelect, localTimeZone, timeZoneOptions, useFieldId } from './_shared';
+
+export interface SchedulePickerProps {
+  submitLabel: string;
+  pending?: boolean;
+  onSubmit: (schedule: ScheduleInput) => void;
+  onCancel: () => void;
+}
+
+export function SchedulePicker({ submitLabel, pending, onSubmit, onCancel }: SchedulePickerProps): ReactElement {
+  const [when, setWhen] = useState('');
+  const [zone, setZone] = useState(localTimeZone);
+  const whenId = useFieldId('comms-send-at');
+  const zoneId = useFieldId('comms-send-zone');
+  return (
+    <form
+      className="mt-2 flex flex-wrap items-end gap-3 rounded-md border p-3"
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (when) onSubmit({ send_at: when, timezone: zone });
+      }}
+    >
+      <div className="space-y-1">
+        <Label htmlFor={whenId}>Send at</Label>
+        <Input id={whenId} type="datetime-local" required value={when} onChange={(e) => setWhen(e.target.value)} />
+      </div>
+      <div className="space-y-1">
+        <Label htmlFor={zoneId}>Time zone</Label>
+        <div>
+          <NativeSelect id={zoneId} value={zone} onChange={(e) => setZone(e.target.value)}>
+            {timeZoneOptions().map((z) => (
+              <option key={z} value={z}>{z}</option>
+            ))}
+          </NativeSelect>
+        </div>
+      </div>
+      <p className="basis-full text-xs text-muted-foreground">
+        A time that has already passed sends immediately.
+      </p>
+      <Button type="submit" size="sm" disabled={pending || !when}>{submitLabel}</Button>
+      <Button type="button" size="sm" variant="ghost" onClick={onCancel}>Close</Button>
+    </form>
+  );
+}

package/src/comms/components/ScheduledSends.tsx

@@ -0,0 +1,103 @@
+/**
+ * Approved drafts waiting for their send time: when they go out, and the three
+ * things you can still do before then (reschedule, send now, cancel). Once the
+ * send starts the server refuses cancel and reschedule (409), shown as-is.
+ */
+import { useState, type ReactElement } from 'react';
+import { Button } from '@startsimpli/ui';
+
+import type { CommsApi } from '../api/comms';
+import {
+  DEFAULT_POLL_MS,
+  useApproveDraft,
+  useCancelDraft,
+  useDraftAudience,
+  useDrafts,
+  useRescheduleDraft,
+} from '../hooks/index';
+import type { Draft } from '../types/index';
+import { SchedulePicker } from './SchedulePicker';
+import { ErrorNotice, formatDateTime } from './_shared';
+
+export interface ScheduledSendsProps {
+  api: CommsApi;
+  pollIntervalMs?: number;
+  /** Drafts per server page. Default 10. */
+  pageSize?: number;
+}
+
+function ScheduledItem({ api, draft }: { api: CommsApi; draft: Draft }) {
+  const [moving, setMoving] = useState(false);
+  const reschedule = useRescheduleDraft(api);
+  const cancel = useCancelDraft(api);
+  const sendNow = useApproveDraft(api);
+  const zone = draft.send_timezone || undefined;
+  const live = useDraftAudience(api, draft.id, true).data?.preview.count;
+  const frozen = draft.recipient_count;
+  const count =
+    live === undefined
+      ? null
+      : frozen != null && frozen !== live
+        ? `${frozen} recipients when scheduled, ${live} now`
+        : `${live} recipients`;
+  return (
+    <li className="py-3">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
+        <span className="min-w-[10rem] flex-1 font-medium">{draft.subject || '(no subject)'}</span>
+        <span className="text-sm text-muted-foreground">
+          {`Sends ${formatDateTime(draft.send_at, zone)}`}
+          {zone && zone !== 'UTC' ? ` (${formatDateTime(draft.send_at, 'UTC')})` : ''}
+        </span>
+        <div className="flex flex-wrap gap-2">
+          <Button type="button" size="sm" variant="outline" onClick={() => setMoving((v) => !v)}>Reschedule</Button>
+          <Button type="button" size="sm" variant="outline" disabled={sendNow.isPending} onClick={() => sendNow.mutate(draft.id)}>
+            Send now
+          </Button>
+          <Button type="button" size="sm" variant="ghost" disabled={cancel.isPending} onClick={() => cancel.mutate(draft.id)}>
+            Cancel schedule
+          </Button>
+        </div>
+      </div>
+      {count ? <p className="text-sm text-muted-foreground">{count}</p> : null}
+      {draft.dispatch_error ? (
+        <p className="text-sm text-muted-foreground">{`Trying again: ${draft.dispatch_error}`}</p>
+      ) : null}
+      {moving ? (
+        <SchedulePicker
+          submitLabel="Move send"
+          pending={reschedule.isPending}
+          onCancel={() => setMoving(false)}
+          onSubmit={(s) => reschedule.mutate({ id: draft.id, ...s }, { onSuccess: () => setMoving(false) })}
+        />
+      ) : null}
+      <ErrorNotice error={reschedule.error ?? cancel.error ?? sendNow.error} />
+    </li>
+  );
+}
+
+export function ScheduledSends({ api, pollIntervalMs = DEFAULT_POLL_MS, pageSize = 10 }: ScheduledSendsProps): ReactElement | null {
+  const [page, setPage] = useState(1);
+  const drafts = useDrafts(api, { status: 'scheduled', page, page_size: pageSize }, pollIntervalMs);
+  if (drafts.error) return <ErrorNotice error={drafts.error} />;
+  if (!drafts.data?.results.length) return null;
+  return (
+    <div className="space-y-1">
+      <h3 className="text-sm font-medium">Scheduled to send</h3>
+      <ul className="divide-y">
+        {drafts.data.results.map((d) => (
+          <ScheduledItem key={d.id} api={api} draft={d} />
+        ))}
+      </ul>
+      {drafts.data.count > pageSize ? (
+        <div className="flex items-center gap-2 text-sm">
+          <Button type="button" size="sm" variant="outline" disabled={!drafts.data.previous} onClick={() => setPage(page - 1)}>
+            Previous
+          </Button>
+          <Button type="button" size="sm" variant="outline" disabled={!drafts.data.next} onClick={() => setPage(page + 1)}>
+            Next
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/comms/components/SendLog.tsx

@@ -18,7 +18,7 @@ import {
 import type { CommsApi } from '../api/comms';
 import { useSends } from '../hooks/index';
 import { COMEBACK_PROGRAM_KEY, PRODUCT_UPDATE_PROGRAM_KEY } from '../types/index';
-import { ErrorNotice, NativeSelect, formatDate, useFieldId } from './_shared';
+import { ErrorNotice, NativeSelect, formatDate, formatDateTime, useFieldId } from './_shared';
 
 export interface SendLogProps {
   api: CommsApi;
@@ -73,6 +73,41 @@ export function SendLog({ api, pageSize = 25 }: SendLogProps): ReactElement {
         </div>
       </div>
       <ErrorNotice error={sends.error} />
+      {data?.scheduled?.length ? (
+        <div className="space-y-1">
+          <h3 className="text-sm font-medium">Scheduled and cancelled</h3>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Subject</TableHead>
+                <TableHead>Program</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Goes out</TableHead>
+                <TableHead>Reason</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {data.scheduled.map((s) => (
+                <TableRow key={s.id}>
+                  <TableCell>{s.subject}</TableCell>
+                  <TableCell>{programLabel(s.program_key)}</TableCell>
+                  <TableCell>{s.status}</TableCell>
+                  <TableCell>
+                    {s.status === 'scheduled'
+                      ? formatDateTime(s.send_at, s.send_timezone)
+                      : s.status === 'cancelled'
+                        ? `Cancelled ${formatDateTime(s.cancelled_at)}`
+                        : s.send_at
+                          ? `Was ${formatDateTime(s.send_at, s.send_timezone)}`
+                          : ''}
+                  </TableCell>
+                  <TableCell>{s.reason}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : null}
       <Table>
         <TableHeader>
           <TableRow>