@visns-studio/visns-components 6.32.2 → 6.34.0

package/src/components/sms/SmsCampaigns.jsx

@@ -0,0 +1,2487 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+    ArrowLeft,
+    ArrowRight,
+    Ban,
+    CircleSlash,
+    ExternalLink,
+    FileSpreadsheet,
+    Loader2,
+    Megaphone,
+    Pause,
+    Play,
+    Plus,
+    RotateCcw,
+    Search,
+    Send,
+    Trash2,
+    TriangleAlert,
+    Upload,
+    X,
+} from 'lucide-react';
+import { useDropzone } from 'react-dropzone';
+import { toast } from 'react-toastify';
+
+import CustomFetch from '../Fetch';
+import StandardModal from '../generic/StandardModal';
+import showConfirmDialog from '../generic/ConfirmationDialog';
+import styles from '../styles/Sms.module.scss';
+import withVaultNavigation from '../vault/vaultNavigation';
+import useDebouncedValue from '../vault/useDebouncedValue';
+import { resolveSmsEndpoints } from './smsEndpoints';
+import {
+    initialsFor,
+    looksLikeNumber,
+    normaliseNumberForDisplay,
+    relativeTime,
+    segmentCount,
+} from './smsHelpers';
+
+/**
+ * What the screen falls back to before `GET campaigns` has answered.
+ *
+ * Every one of these is the server's to decide and the server's answer always
+ * wins — they exist so the first paint of the wizard has a body limit and a
+ * cap to obey rather than `undefined`, which would let somebody type a message
+ * the send then refuses. `max_body_length` is six GSM-7 parts, which is what
+ * `MAX_SEGMENTS` already calls the most a composer will send in one go.
+ */
+export const DEFAULT_CAMPAIGN_SETTINGS = {
+    per_minute: 20,
+    max_recipients: 1000,
+    footer: '',
+    footer_required: false,
+    max_body_length: 918,
+};
+
+/**
+ * A campaign's status, and the tone it is drawn in.
+ *
+ * `sending` is deliberately NOT warn. A campaign that is doing exactly what it
+ * was told to do is not a warning, and a page of amber chips on an ordinary
+ * Tuesday teaches people to stop reading them — so it gets the brand tint,
+ * which says "live" without saying "look at this". `paused` is the amber one:
+ * somebody stopped it and nothing is going out until somebody starts it again.
+ */
+export const CAMPAIGN_STATUSES = {
+    draft: { label: 'Draft', tone: 'muted' },
+    sending: { label: 'Sending', tone: 'live' },
+    paused: { label: 'Paused', tone: 'warn' },
+    completed: { label: 'Completed', tone: 'ok' },
+    cancelled: { label: 'Cancelled', tone: 'muted' },
+};
+
+/** A recipient's own status, in the same vocabulary. */
+export const RECIPIENT_STATUSES = {
+    pending: { label: 'Pending', tone: 'muted' },
+    sent: { label: 'Sent', tone: 'ok' },
+    failed: { label: 'Failed', tone: 'bad' },
+    skipped: { label: 'Skipped', tone: 'warn' },
+};
+
+const RECIPIENT_FILTERS = [
+    { id: '', label: 'All' },
+    { id: 'pending', label: 'Pending' },
+    { id: 'sent', label: 'Sent' },
+    { id: 'failed', label: 'Failed' },
+    { id: 'skipped', label: 'Skipped' },
+];
+
+const TONE_CLASSES = {
+    ok: 'pillOk',
+    warn: 'pillWarn',
+    bad: 'pillBad',
+    muted: 'pillMuted',
+    live: 'campaignPillLive',
+};
+
+/** Laravel's error bag arrives joined with `<br />`; a sentence is text. */
+const asPlainText = (message) =>
+    String(message ?? '')
+        .replace(/<br\s*\/?>/gi, ' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+
+/**
+ * The `?campaign=` a deep link carries, if any.
+ *
+ * Local rather than beside `threadIdFromSearch` in smsHelpers, because that
+ * one is a contract between two components — the header popover builds those
+ * links and the inbox reads them — while this parameter is written and read by
+ * this page alone. Same shape, on purpose: a link into a campaign and a link
+ * into a conversation should not need two different explanations.
+ */
+export const campaignIdFromSearch = (search) => {
+    const raw = String(search ?? '');
+
+    if (raw === '') return null;
+
+    const query = raw.startsWith('?') ? raw.slice(1) : raw;
+    const match = query.match(/(?:^|&)campaign=([^&#]*)/);
+
+    if (!match) return null;
+
+    const value = decodeURIComponent(match[1]);
+
+    return value === '' ? null : value;
+};
+
+/**
+ * Open a recipient's conversation in the inbox, in this tab.
+ *
+ * The row's "Open conversation" was a plain `<a target="_blank">`, and it was
+ * the ONLY navigation in the messaging module that left the router out of it —
+ * `SmsInboxBadge` reaches the very same `?thread=` URL with `navigate()` and
+ * has always worked. A new-tab hand-off is not something this page can rely on:
+ * it is the browser's to honour or drop, and an installed/standalone window or
+ * a blocked target leaves the click doing nothing at all, with no error
+ * anywhere. The inbox has read `?thread=` on mount since it was written, so the
+ * destination was never the problem — reaching it was.
+ *
+ * This is the ordinary SPA link rule, and the `href` is deliberately kept: a
+ * modified click (⌘/ctrl/shift/alt, or a middle click) is left to the browser,
+ * so opening the conversation in a new tab on purpose still works, and the
+ * status bar still shows where the link goes.
+ */
+const openInInbox = (event, href, navigate) => {
+    if (!navigate) return;
+    if (event.defaultPrevented) return;
+    if (event.button !== 0) return;
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+
+    event.preventDefault();
+    navigate(href);
+};
+
+/** Keep the address bar in step without pushing a history entry per click. */
+const syncCampaignInUrl = (campaignId) => {
+    if (typeof window === 'undefined' || !window.history?.replaceState) return;
+
+    const url = new URL(window.location.href);
+
+    if (campaignId) url.searchParams.set('campaign', campaignId);
+    else url.searchParams.delete('campaign');
+
+    window.history.replaceState({}, '', `${url.pathname}${url.search}${url.hash}`);
+};
+
+/* ------------------------------------------------------------ the recipients */
+
+/**
+ * SheetJS, loaded only once somebody actually drops a file.
+ *
+ * The same arrangement `qrDecode.js` makes with jsQR, and for the same reason:
+ * `xlsx` is the better part of a megabyte of parser, and a consumer that never
+ * imports a recipient list should never download it. The promise is cached, so
+ * a second file costs nothing.
+ *
+ * ONE HONEST CAVEAT, and the build says so out loud: `GenericReport.jsx`
+ * imports `xlsx` STATICALLY, so in the single-bundle build the parser is in
+ * the download either way and the split buys nothing today. That is a reason
+ * to fix GenericReport, not a reason to import it statically here — the
+ * warning names the one file standing between this module and the saving, and
+ * a second static import would remove the warning by making the problem
+ * permanent. A consumer importing this component directly from `src` already
+ * gets the saving.
+ */
+let xlsxPromise = null;
+
+const loadXlsx = () => {
+    if (!xlsxPromise) {
+        xlsxPromise = import('xlsx').then((module) => {
+            // A UMD package: what a namespace import puts on `default` depends
+            // on the loader, so take whichever object actually has `read`.
+            const candidates = [module, module?.default, module?.default?.default];
+            const found = candidates.find((one) => typeof one?.read === 'function');
+
+            if (!found) throw new Error('The spreadsheet reader did not load.');
+
+            return found;
+        });
+    }
+
+    return xlsxPromise;
+};
+
+/** The first sheet of a `.csv` or `.xlsx`, as a grid of raw cells. */
+export const readSpreadsheet = async (file) => {
+    const XLSX = await loadXlsx();
+    const buffer = await file.arrayBuffer();
+    const book = XLSX.read(new Uint8Array(buffer), { type: 'array' });
+    const first = book.SheetNames?.[0];
+
+    if (!first) return [];
+
+    return XLSX.utils.sheet_to_json(book.Sheets[first], {
+        header: 1,
+        blankrows: false,
+        defval: '',
+    });
+};
+
+/**
+ * One cell as text.
+ *
+ * The case worth knowing: a mobile typed into Excel as `0412 345 678` is
+ * stored as the NUMBER 412345678 and handed back with its leading zero gone,
+ * which is the commonest way an imported list arrives full of numbers that
+ * cannot be sent to. Nine digits beginning with a 4, arriving as a number
+ * rather than a string, is an Australian mobile that has been through exactly
+ * that — and nothing else in a recipient list looks like it. The zero goes
+ * back on. Everything else is stringified and left alone.
+ */
+export const cellText = (value) => {
+    if (value === null || value === undefined) return '';
+
+    if (typeof value === 'number') {
+        const digits = String(value);
+
+        return /^4\d{8}$/.test(digits) ? `0${digits}` : digits;
+    }
+
+    return String(value).replace(/\s+/g, ' ').trim();
+};
+
+/**
+ * Which column holds the name, and which the mobile.
+ *
+ * Ordered, and the order is the rule: an exact `name` beats a `first name`
+ * beats anything merely containing "name", so a sheet carrying both `Name` and
+ * `Company Name` defaults to the person rather than the company. Every guess
+ * is only a default — the two selects above the preview are what actually
+ * decide, and they are drawn whether the guess found anything or not.
+ */
+export const NAME_HINTS = [/^name$/i, /^full/i, /^first/i, /full/i, /name/i];
+export const NUMBER_HINTS = [
+    /^mobile/i,
+    /^phone/i,
+    /^cell/i,
+    /mobile/i,
+    /phone/i,
+    /cell/i,
+    /number/i,
+];
+
+export const guessColumn = (headers, hints) => {
+    for (const hint of hints) {
+        const index = headers.findIndex((header) => hint.test(String(header ?? '')));
+
+        if (index !== -1) return index;
+    }
+
+    return -1;
+};
+
+/**
+ * The header row, made safe to key an object with.
+ *
+ * A blank heading becomes `Column 3` and a repeated one is suffixed, because
+ * these strings are the keys of `extra` — and `extra` is what the server fills
+ * `{<column>}` from. Two columns sharing a key would silently drop one of
+ * them, and the placeholder chip would then offer a token that filled with the
+ * wrong value on every row.
+ */
+const headerKeys = (row, width) => {
+    const keys = [];
+
+    for (let index = 0; index < width; index += 1) {
+        const raw = cellText(row?.[index]);
+        const base = raw === '' ? `Column ${index + 1}` : raw;
+
+        let unique = base;
+        let suffix = 2;
+
+        while (keys.includes(unique)) {
+            unique = `${base} ${suffix}`;
+            suffix += 1;
+        }
+
+        keys.push(unique);
+    }
+
+    return keys;
+};
+
+/**
+ * A grid of cells split into headings and records.
+ *
+ * The first row is the header row, except when it plainly is not: a list
+ * exported straight out of another system often starts at the first person.
+ * The test for that is deliberately narrow — nothing in the first row reads as
+ * a heading we recognise, AND one of its cells is a phone number — because
+ * both ways of getting it wrong are immediately visible on the preview table
+ * underneath (a missing first person, or a row of column names pretending to
+ * be one) and the narrow test is the one that almost never fires by accident.
+ */
+export const readSheetRows = (matrix) => {
+    const rows = (matrix || []).filter(
+        (row) =>
+            Array.isArray(row) && row.some((cell) => cellText(cell) !== '')
+    );
+
+    if (rows.length === 0) return { headers: [], records: [] };
+
+    const width = rows.reduce((widest, row) => Math.max(widest, row.length), 0);
+    const first = rows[0];
+    const headings = first.map((cell) => cellText(cell));
+
+    const named =
+        guessColumn(headings, NAME_HINTS) !== -1 ||
+        guessColumn(headings, NUMBER_HINTS) !== -1;
+    const looksLikeData = headings.some((cell) => looksLikeNumber(cell));
+
+    if (!named && looksLikeData) {
+        return { headers: headerKeys([], width), records: rows };
+    }
+
+    return { headers: headerKeys(first, width), records: rows.slice(1) };
+};
+
+/**
+ * Records plus a column choice, as the recipients the contract wants.
+ *
+ * Every column that is neither the name nor the mobile is kept in `extra`
+ * **under its own heading**, and that is what makes the placeholder chips
+ * honest: the chip inserts the same string this object is keyed by, so
+ * whatever a heading happens to be called — `Client Ref`, `Due date` — the
+ * token the sender clicks and the data the server holds cannot disagree.
+ */
+export const recipientsFromRecords = (records, headers, nameColumn, numberColumn) => {
+    const nameIndex = headers.indexOf(nameColumn);
+    const numberIndex = headers.indexOf(numberColumn);
+
+    if (numberIndex === -1) return [];
+
+    return (records || [])
+        .map((record) => {
+            const extra = {};
+
+            headers.forEach((header, index) => {
+                if (index === nameIndex || index === numberIndex) return;
+
+                const value = cellText(record?.[index]);
+
+                if (value !== '') extra[header] = value;
+            });
+
+            return {
+                name: nameIndex === -1 ? '' : cellText(record?.[nameIndex]),
+                number: cellText(record?.[numberIndex]),
+                extra,
+            };
+        })
+        .filter((row) => row.name !== '' || row.number !== '');
+};
+
+/**
+ * Lines of `Name, 04xx xxx xxx` typed or pasted into the box.
+ *
+ * Two separators, and which one is tried first matters. A paste out of a
+ * spreadsheet is tab separated, so a tab wins outright. Failing that the split
+ * is on the LAST comma rather than the first, because the CRM writes people
+ * surname-first — "Perera, Darshini, 0412 345 678" — and splitting on the
+ * first comma would make "Darshini, 0412 345 678" the phone number and lose
+ * half the name with it.
+ *
+ * A line with one field is a bare number, which is the shape a column of
+ * numbers copied out of anywhere arrives in.
+ */
+export const parsePastedRecipients = (text) =>
+    String(text ?? '')
+        .split(/\r?\n/)
+        .map((line) => line.trim())
+        .filter((line) => line !== '')
+        .map((line) => {
+            if (line.includes('\t')) {
+                const parts = line.split('\t').map((part) => part.trim());
+
+                return parts.length > 1
+                    ? { name: parts[0], number: parts[1], extra: {} }
+                    : { name: '', number: parts[0], extra: {} };
+            }
+
+            const comma = line.lastIndexOf(',');
+
+            if (comma === -1) return { name: '', number: line, extra: {} };
+
+            return {
+                name: line.slice(0, comma).trim(),
+                number: line.slice(comma + 1).trim(),
+                extra: {},
+            };
+        })
+        .filter((row) => row.number !== '' || row.name !== '');
+
+/** Today, as the date half of a campaign's default name. */
+const todayStamp = (now = new Date()) =>
+    `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(
+        now.getDate()
+    ).padStart(2, '0')}`;
+
+/**
+ * What a campaign is called until somebody names it themselves.
+ *
+ * The date alone is a name nobody can pick out of a list of six, so the first
+ * few words of the message go on the end. Both halves, because two campaigns
+ * on one morning would otherwise be called the same thing.
+ */
+export const defaultCampaignName = (body, now = new Date()) => {
+    const words = String(body ?? '')
+        .replace(/\s+/g, ' ')
+        .trim()
+        .split(' ')
+        .filter(Boolean)
+        .slice(0, 6)
+        .join(' ');
+
+    return words === '' ? todayStamp(now) : `${todayStamp(now)} · ${words}`;
+};
+
+/** How long a send of this size takes at the line's throttle. */
+export const estimateMinutes = (recipients, perMinute) => {
+    const rate = Number(perMinute) || 0;
+    const count = Number(recipients) || 0;
+
+    if (rate <= 0 || count <= 0) return 0;
+
+    return Math.max(1, Math.ceil(count / rate));
+};
+
+/* ------------------------------------------------------------ small pieces */
+
+const StatusChip = ({ status, table = CAMPAIGN_STATUSES }) => {
+    const entry = table[status] || { label: status || '—', tone: 'muted' };
+
+    return (
+        <span className={`${styles.pill} ${styles[TONE_CLASSES[entry.tone]]}`}>
+            {entry.label}
+        </span>
+    );
+};
+
+/**
+ * The progress bar, and the number beside it.
+ *
+ * The figure is `sent/total` rather than a percentage: on a send of forty,
+ * "12 of 40" is a thing somebody can act on and "30%" is not. The bar carries
+ * the percentage because that is what a bar is for.
+ */
+const ProgressBar = ({ campaign }) => {
+    const counts = campaign?.counts || {};
+    const total = Number(counts.total) || 0;
+    const sent = Number(counts.sent) || 0;
+    const percent = Math.max(0, Math.min(100, Number(campaign?.progress) || 0));
+
+    return (
+        <div className={styles.campaignProgress}>
+            <div
+                className={styles.campaignBar}
+                role="img"
+                aria-label={`${percent}% sent`}
+            >
+                <span
+                    className={styles.campaignBarFill}
+                    style={{ width: `${percent}%` }}
+                />
+            </div>
+            <span className={styles.campaignProgressCount}>
+                {sent} / {total}
+            </span>
+        </div>
+    );
+};
+
+/* --------------------------------------------------------- the opt-out list */
+
+/**
+ * Numbers that must not be sent to again.
+ *
+ * A modal rather than a fourth view, because it is a reference list somebody
+ * opens to check or correct one entry and then closes — not somewhere anybody
+ * works. Everything here is read live; nothing is held while it is shut.
+ */
+const OptOutManager = ({ routes, canManage, onClose }) => {
+    const [optOuts, setOptOuts] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [search, setSearch] = useState('');
+    const [number, setNumber] = useState('');
+    const [note, setNote] = useState('');
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState('');
+
+    const mountedRef = useRef(true);
+    const debouncedSearch = useDebouncedValue(search, 300);
+
+    useEffect(
+        () => () => {
+            mountedRef.current = false;
+        },
+        []
+    );
+
+    const load = useCallback(
+        (query) => {
+            CustomFetch(
+                routes.optOuts,
+                'GET',
+                query ? { search: query } : null,
+                (result) => {
+                    if (!mountedRef.current) return;
+
+                    setOptOuts(Array.isArray(result?.opt_outs) ? result.opt_outs : []);
+                    setLoading(false);
+                },
+                () => {
+                    if (mountedRef.current) setLoading(false);
+                }
+            ).catch(() => {
+                if (mountedRef.current) setLoading(false);
+            });
+        },
+        [routes]
+    );
+
+    useEffect(() => {
+        load(debouncedSearch.trim());
+    }, [load, debouncedSearch]);
+
+    const add = () => {
+        if (number.trim() === '') return;
+
+        setSaving(true);
+        setError('');
+
+        CustomFetch(
+            routes.optOuts,
+            'POST',
+            { number: number.trim(), note: note.trim() === '' ? undefined : note.trim() },
+            () => {
+                if (!mountedRef.current) return;
+
+                setSaving(false);
+                setNumber('');
+                setNote('');
+                toast.success('Number added to the opt-out list');
+                load(debouncedSearch.trim());
+            },
+            (message) => {
+                if (!mountedRef.current) return;
+
+                setSaving(false);
+                // The one failure a person can fix from here is the number
+                // itself, so it stays under the field rather than becoming a
+                // toast behind the dialog.
+                setError(asPlainText(message) || 'That number could not be added.');
+            }
+        ).catch(() => {
+            if (mountedRef.current) setSaving(false);
+        });
+    };
+
+    const remove = (entry) => {
+        showConfirmDialog({
+            title: 'Remove this opt-out?',
+            message:
+                'The number goes back into future campaigns. Messages already skipped stay skipped.',
+            confirmLabel: 'Remove',
+            cancelLabel: 'Keep it',
+            data: { name: entry.display_number || entry.number },
+            onConfirm: () => {
+                CustomFetch(
+                    routes.optOut(entry.id),
+                    'DELETE',
+                    {},
+                    () => {
+                        toast.success('Opt-out removed');
+                        load(debouncedSearch.trim());
+                    },
+                    null
+                ).catch(() => {});
+            },
+        });
+    };
+
+    return (
+        <StandardModal isOpen onClose={onClose} size="medium">
+            <div className={styles.modalForm}>
+                <div className={styles.modalHead}>
+                    <h3 className={styles.modalTitle}>
+                        <CircleSlash size={16} strokeWidth={2.2} aria-hidden="true" />
+                        Opt-outs
+                    </h3>
+                    <button
+                        type="button"
+                        className={styles.iconButton}
+                        onClick={onClose}
+                        aria-label="Close"
+                    >
+                        <X size={15} strokeWidth={2} aria-hidden="true" />
+                    </button>
+                </div>
+
+                <p className={styles.help}>
+                    A campaign skips every number on this list and says so in its
+                    report. One-to-one replies in the inbox are not affected.
+                </p>
+
+                <div className={styles.searchBar}>
+                    <Search size={15} strokeWidth={2} aria-hidden="true" />
+                    <input
+                        type="text"
+                        className={styles.searchInput}
+                        value={search}
+                        placeholder="Search numbers and notes…"
+                        aria-label="Search opt-outs"
+                        autoComplete="off"
+                        onChange={(event) => setSearch(event.target.value)}
+                    />
+                </div>
+
+                {canManage && (
+                    <div className={styles.optOutAdd}>
+                        <label className={styles.field}>
+                            <span className={styles.labelSmall}>Number</span>
+                            <input
+                                type="text"
+                                className={styles.input}
+                                value={number}
+                                placeholder="0412 345 678"
+                                autoComplete="off"
+                                onChange={(event) => {
+                                    setNumber(event.target.value);
+                                    if (error !== '') setError('');
+                                }}
+                            />
+                        </label>
+
+                        <label className={styles.field}>
+                            <span className={styles.labelSmall}>Note</span>
+                            <input
+                                type="text"
+                                className={styles.input}
+                                value={note}
+                                placeholder="Asked to stop, 4 September"
+                                autoComplete="off"
+                                onChange={(event) => setNote(event.target.value)}
+                            />
+                        </label>
+
+                        <button
+                            type="button"
+                            className={styles.primaryButton}
+                            onClick={add}
+                            disabled={saving || number.trim() === ''}
+                        >
+                            {saving ? (
+                                <Loader2 size={14} className={styles.spin} aria-hidden="true" />
+                            ) : (
+                                <Plus size={14} strokeWidth={2} aria-hidden="true" />
+                            )}
+                            Add number
+                        </button>
+                    </div>
+                )}
+
+                {error !== '' && <p className={styles.fieldError}>{error}</p>}
+
+                <div className={styles.tableWrap}>
+                    <table className={styles.table}>
+                        <thead>
+                            <tr>
+                                <th>Number</th>
+                                <th>Source</th>
+                                <th>Note</th>
+                                <th>Added by</th>
+                                <th>When</th>
+                                {canManage && <th className={styles.actionsHead}>Actions</th>}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {optOuts.map((entry) => (
+                                <tr key={entry.id}>
+                                    <td className={styles.numberCell}>
+                                        <strong>
+                                            {entry.display_number ||
+                                                normaliseNumberForDisplay(entry.number)}
+                                        </strong>
+                                    </td>
+                                    <td>{entry.source || <span className={styles.muted}>—</span>}</td>
+                                    <td>{entry.note || <span className={styles.muted}>—</span>}</td>
+                                    <td>
+                                        {entry.user?.name || (
+                                            <span className={styles.muted}>Automatic</span>
+                                        )}
+                                    </td>
+                                    <td>{relativeTime(entry.created_at)}</td>
+                                    {canManage && (
+                                        <td className={styles.actionsCell}>
+                                            <button
+                                                type="button"
+                                                className={styles.dangerLink}
+                                                onClick={() => remove(entry)}
+                                            >
+                                                Remove
+                                            </button>
+                                        </td>
+                                    )}
+                                </tr>
+                            ))}
+
+                            {optOuts.length === 0 && (
+                                <tr>
+                                    <td
+                                        colSpan={canManage ? 6 : 5}
+                                        className={styles.tableEmpty}
+                                    >
+                                        {loading ? (
+                                            <Loader2
+                                                size={18}
+                                                className={styles.spin}
+                                                aria-label="Loading"
+                                            />
+                                        ) : (
+                                            <p>
+                                                {search.trim() === ''
+                                                    ? 'Nobody has opted out.'
+                                                    : `No opt-out matches "${search.trim()}".`}
+                                            </p>
+                                        )}
+                                    </td>
+                                </tr>
+                            )}
+                        </tbody>
+                    </table>
+                </div>
+
+                <div className={styles.modalActions}>
+                    <button type="button" className={styles.ghostButton} onClick={onClose}>
+                        Close
+                    </button>
+                </div>
+            </div>
+        </StandardModal>
+    );
+};
+
+/* ------------------------------------------------------------------ the list */
+
+const CampaignList = ({
+    campaigns,
+    loading,
+    canManage,
+    onNew,
+    onOpen,
+    onOptOuts,
+}) => (
+    <>
+        <div className={styles.sectionHead}>
+            <h2 className={styles.sectionTitle}>Campaigns</h2>
+
+            <div className={styles.headActions}>
+                <button type="button" className={styles.ghostButton} onClick={onOptOuts}>
+                    <CircleSlash size={14} strokeWidth={2} aria-hidden="true" />
+                    Opt-outs
+                </button>
+                {canManage && (
+                    <button type="button" className={styles.primaryButton} onClick={onNew}>
+                        <Plus size={14} strokeWidth={2} aria-hidden="true" />
+                        New campaign
+                    </button>
+                )}
+            </div>
+        </div>
+
+        <div className={styles.tableWrap}>
+            <table className={styles.table}>
+                <thead>
+                    <tr>
+                        <th>Campaign</th>
+                        <th>Line</th>
+                        <th>Status</th>
+                        <th>Progress</th>
+                        <th>Created by</th>
+                        <th>Created</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {campaigns.map((campaign) => (
+                        <tr key={campaign.id}>
+                            <td>
+                                <button
+                                    type="button"
+                                    className={styles.linkButton}
+                                    onClick={() => onOpen(campaign.id)}
+                                >
+                                    {campaign.name || 'Untitled campaign'}
+                                </button>
+                            </td>
+                            <td>
+                                {campaign.line?.label || (
+                                    <span className={styles.muted}>No line</span>
+                                )}
+                            </td>
+                            <td>
+                                <StatusChip status={campaign.status} />
+                            </td>
+                            <td className={styles.campaignProgressCell}>
+                                <ProgressBar campaign={campaign} />
+                            </td>
+                            <td>
+                                {campaign.user?.name || (
+                                    <span className={styles.muted}>—</span>
+                                )}
+                            </td>
+                            <td>{relativeTime(campaign.created_at)}</td>
+                        </tr>
+                    ))}
+
+                    {campaigns.length === 0 && (
+                        <tr>
+                            <td colSpan={6} className={styles.tableEmpty}>
+                                {loading ? (
+                                    <Loader2
+                                        size={18}
+                                        className={styles.spin}
+                                        aria-label="Loading"
+                                    />
+                                ) : (
+                                    <p>
+                                        No campaigns yet. A campaign sends one message to
+                                        a list of numbers, one at a time, from a line you
+                                        choose.
+                                    </p>
+                                )}
+                            </td>
+                        </tr>
+                    )}
+                </tbody>
+            </table>
+        </div>
+    </>
+);
+
+/* --------------------------------------------------------------- the wizard */
+
+/**
+ * Three steps, and it is a page rather than a modal.
+ *
+ * The recipient table is the reason: a list of four hundred people with a
+ * sanity flag on the numbers that will not send is the one thing on this
+ * screen somebody genuinely reads, and a dialog gives it a third of the
+ * window. The steps are local state rather than the URL — a half-built
+ * campaign is not something a link can restore, so a `?step=2` anybody could
+ * paste would open on an empty list.
+ */
+const CampaignWizard = ({ routes, settings, lines, onCancel, onSaved, onOpen }) => {
+    const [step, setStep] = useState(1);
+
+    // Step one.
+    const [rows, setRows] = useState([]);
+    const [headers, setHeaders] = useState([]);
+    const [records, setRecords] = useState([]);
+    const [nameColumn, setNameColumn] = useState('');
+    const [numberColumn, setNumberColumn] = useState('');
+    const [fileName, setFileName] = useState('');
+    const [fileError, setFileError] = useState('');
+    const [reading, setReading] = useState(false);
+    const [paste, setPaste] = useState('');
+    const [capped, setCapped] = useState(false);
+
+    // Step two.
+    const [lineId, setLineId] = useState('');
+    const [name, setName] = useState('');
+    const [nameTouched, setNameTouched] = useState(false);
+    const [body, setBody] = useState('');
+    const [previews, setPreviews] = useState([]);
+    const [previewing, setPreviewing] = useState(false);
+
+    // Step three.
+    const [creating, setCreating] = useState(false);
+    const [createError, setCreateError] = useState('');
+    const [created, setCreated] = useState(null);
+    const [report, setReport] = useState(null);
+    const [starting, setStarting] = useState(false);
+
+    const mountedRef = useRef(true);
+    const bodyRef = useRef(null);
+    const debouncedBody = useDebouncedValue(body, 400);
+
+    useEffect(
+        () => () => {
+            mountedRef.current = false;
+        },
+        []
+    );
+
+    const maxRecipients = Number(settings.max_recipients) || 0;
+
+    /**
+     * Add rows, and stop at the cap rather than letting the server refuse the
+     * whole list after somebody has written the message.
+     */
+    const addRows = useCallback(
+        (incoming) => {
+            setRows((previous) => {
+                const next = [...previous, ...incoming];
+
+                if (maxRecipients > 0 && next.length > maxRecipients) {
+                    setCapped(true);
+
+                    return next.slice(0, maxRecipients);
+                }
+
+                return next;
+            });
+        },
+        [maxRecipients]
+    );
+
+    /* --------------------------------------------------------- step 1 input */
+
+    const onDrop = useCallback((accepted) => {
+        const file = accepted?.[0];
+
+        if (!file) return;
+
+        setReading(true);
+        setFileError('');
+        setFileName(file.name);
+
+        readSpreadsheet(file)
+            .then((matrix) => {
+                if (!mountedRef.current) return;
+
+                const sheet = readSheetRows(matrix);
+
+                setReading(false);
+
+                if (sheet.records.length === 0) {
+                    setFileError('That file has no rows in it.');
+                    setHeaders([]);
+                    setRecords([]);
+
+                    return;
+                }
+
+                setHeaders(sheet.headers);
+                setRecords(sheet.records);
+
+                const nameIndex = guessColumn(sheet.headers, NAME_HINTS);
+                const numberIndex = guessColumn(sheet.headers, NUMBER_HINTS);
+
+                setNameColumn(nameIndex === -1 ? '' : sheet.headers[nameIndex]);
+                setNumberColumn(
+                    numberIndex === -1 ? '' : sheet.headers[numberIndex]
+                );
+            })
+            .catch(() => {
+                if (!mountedRef.current) return;
+
+                setReading(false);
+                setFileError(
+                    'That file could not be read. A .csv or .xlsx exported from a spreadsheet is what this expects.'
+                );
+            });
+    }, []);
+
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        accept: {
+            'text/csv': ['.csv'],
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
+        },
+        maxFiles: 1,
+        multiple: false,
+        onDrop,
+    });
+
+    /**
+     * The imported rows follow the two column selects.
+     *
+     * Re-derived rather than stamped once on drop, so changing "which column
+     * is the mobile" corrects the list in front of the person changing it —
+     * which is the whole reason the selects are there.
+     */
+    const importedRows = useMemo(
+        () => recipientsFromRecords(records, headers, nameColumn, numberColumn),
+        [records, headers, nameColumn, numberColumn]
+    );
+
+    const takeImported = () => {
+        addRows(importedRows);
+        setHeaders([]);
+        setRecords([]);
+        setNameColumn('');
+        setNumberColumn('');
+        setFileName('');
+    };
+
+    const takePasted = () => {
+        addRows(parsePastedRecipients(paste));
+        setPaste('');
+    };
+
+    const removeRow = (index) => {
+        setRows((previous) => previous.filter((one, at) => at !== index));
+        // The cap notice is about a list that no longer exists the moment
+        // somebody takes a row out of it, and a sentence saying "stopped at
+        // 500" over 499 recipients is a sentence nobody can make sense of.
+        setCapped(false);
+    };
+
+    /* ---------------------------------------------------------- step 2 body */
+
+    const activeLines = useMemo(
+        () => lines.filter((line) => line.active !== false),
+        [lines]
+    );
+
+    useEffect(() => {
+        if (lineId !== '' || activeLines.length === 0) return;
+
+        setLineId(String(activeLines[0].id));
+    }, [activeLines, lineId]);
+
+    const extraKeys = useMemo(() => {
+        const seen = [];
+
+        rows.forEach((row) => {
+            Object.keys(row.extra || {}).forEach((key) => {
+                if (!seen.includes(key)) seen.push(key);
+            });
+        });
+
+        return seen;
+    }, [rows]);
+
+    const placeholders = useMemo(
+        () => ['{first_name}', '{name}', '{last_name}', ...extraKeys.map((key) => `{${key}}`)],
+        [extraKeys]
+    );
+
+    const footer = String(settings.footer ?? '');
+    const footerRequired = Boolean(settings.footer_required) && footer !== '';
+
+    /**
+     * The message as it actually leaves: body, then the footer the server
+     * appends. Counted together because that is what the recipient's phone
+     * charges for — a body that fits in one part and a footer that does not is
+     * a two-part message, and a counter that said "1 SMS" would be wrong on
+     * every single send.
+     */
+    const composed = footerRequired ? `${body}\n${footer}` : body;
+    const counts = segmentCount(composed);
+
+    const bodyLimit = footerRequired
+        ? Math.max(0, Number(settings.max_body_length) - footer.length - 1)
+        : Number(settings.max_body_length) || 0;
+    const overBodyLimit = bodyLimit > 0 && body.length > bodyLimit;
+
+    // The name follows the message until somebody types one of their own —
+    // after that it is theirs, including if they clear it.
+    useEffect(() => {
+        if (nameTouched) return;
+
+        setName(defaultCampaignName(body));
+    }, [body, nameTouched]);
+
+    /** Put a placeholder where the caret is, not on the end of the message. */
+    const insertPlaceholder = (token) => {
+        const box = bodyRef.current;
+        const at = box ? box.selectionStart : body.length;
+        const to = box ? box.selectionEnd : body.length;
+
+        const next = `${body.slice(0, at)}${token}${body.slice(to)}`;
+
+        setBody(next);
+
+        requestAnimationFrame(() => {
+            const target = bodyRef.current;
+
+            if (!target) return;
+
+            target.focus();
+            target.setSelectionRange(at + token.length, at + token.length);
+        });
+    };
+
+    useEffect(() => {
+        if (step !== 2 || debouncedBody.trim() === '' || rows.length === 0) {
+            setPreviews([]);
+
+            return;
+        }
+
+        setPreviewing(true);
+
+        CustomFetch(
+            routes.campaignPreview,
+            'POST',
+            { body: debouncedBody, recipients: rows.slice(0, 3) },
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setPreviews(Array.isArray(result?.previews) ? result.previews : []);
+                setPreviewing(false);
+            },
+            () => {
+                if (!mountedRef.current) return;
+
+                // A preview that cannot be fetched is not a reason to stop
+                // somebody writing; the panel simply says nothing.
+                setPreviews([]);
+                setPreviewing(false);
+            }
+        ).catch(() => {
+            if (mountedRef.current) setPreviewing(false);
+        });
+    }, [step, debouncedBody, rows, routes]);
+
+    /* -------------------------------------------------------------- step 3 */
+
+    const line = activeLines.find((one) => String(one.id) === String(lineId)) || null;
+
+    const create = () => {
+        setCreating(true);
+        setCreateError('');
+
+        CustomFetch(
+            routes.campaigns,
+            'POST',
+            { line_id: lineId, name: name.trim(), body, recipients: rows },
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setCreating(false);
+                setCreated(result?.campaign ?? null);
+                setReport(result?.report ?? null);
+            },
+            (message) => {
+                if (!mountedRef.current) return;
+
+                setCreating(false);
+                // At the top of the step, never a toast alone: the refusal
+                // names a list the person is standing in front of, and a
+                // notice that fades is no use for reading one.
+                setCreateError(
+                    asPlainText(message) || 'That campaign could not be created.'
+                );
+            }
+        ).catch(() => {
+            if (mountedRef.current) setCreating(false);
+        });
+    };
+
+    const start = () => {
+        if (!created) return;
+
+        setStarting(true);
+
+        CustomFetch(
+            routes.campaignStart(created.id),
+            'POST',
+            {},
+            () => {
+                if (!mountedRef.current) return;
+
+                setStarting(false);
+                onOpen(created.id);
+            },
+            (message) => {
+                if (!mountedRef.current) return;
+
+                setStarting(false);
+                setCreateError(asPlainText(message) || 'That campaign could not be started.');
+            }
+        ).catch(() => {
+            if (mountedRef.current) setStarting(false);
+        });
+    };
+
+    /* --------------------------------------------------------------- render */
+
+    const badNumbers = rows.filter((row) => !looksLikeNumber(row.number)).length;
+    const canLeaveOne = rows.length > 0;
+    const canLeaveTwo =
+        lineId !== '' && body.trim() !== '' && !overBodyLimit && name.trim() !== '';
+
+    return (
+        <div className={styles.campaignWizard}>
+            <div className={styles.sectionHead}>
+                <h2 className={styles.sectionTitle}>New campaign</h2>
+                <button type="button" className={styles.ghostButton} onClick={onCancel}>
+                    <X size={14} strokeWidth={2} aria-hidden="true" />
+                    Cancel
+                </button>
+            </div>
+
+            <ol className={styles.campaignSteps}>
+                {['Recipients', 'Message', 'Review and send'].map((label, index) => (
+                    <li
+                        key={label}
+                        className={`${styles.campaignStep} ${
+                            step === index + 1 ? styles.campaignStepOn : ''
+                        }`}
+                        aria-current={step === index + 1 ? 'step' : undefined}
+                    >
+                        <span className={styles.campaignStepNumber}>{index + 1}</span>
+                        {label}
+                    </li>
+                ))}
+            </ol>
+
+            {step === 1 && (
+                <>
+                    <div className={styles.campaignSources}>
+                        <section className={styles.campaignSource}>
+                            <h3 className={styles.campaignSourceTitle}>
+                                <FileSpreadsheet size={15} strokeWidth={2} aria-hidden="true" />
+                                From a spreadsheet
+                            </h3>
+
+                            <div
+                                {...getRootProps({
+                                    className: `${styles.campaignDrop} ${
+                                        isDragActive ? styles.campaignDropOn : ''
+                                    }`,
+                                })}
+                            >
+                                <input {...getInputProps()} />
+                                {reading ? (
+                                    <Loader2
+                                        size={18}
+                                        className={styles.spin}
+                                        aria-label="Reading"
+                                    />
+                                ) : (
+                                    <Upload size={18} strokeWidth={1.8} aria-hidden="true" />
+                                )}
+                                <p className={styles.help}>
+                                    {fileName !== '' && !reading
+                                        ? fileName
+                                        : 'Drop a .csv or .xlsx here, or click to pick one. The file is read in this browser and never uploaded.'}
+                                </p>
+                            </div>
+
+                            {fileError !== '' && (
+                                <p className={styles.fieldError}>{fileError}</p>
+                            )}
+
+                            {headers.length > 0 && (
+                                <div className={styles.campaignColumns}>
+                                    <label className={styles.field}>
+                                        <span className={styles.labelSmall}>Name column</span>
+                                        <select
+                                            className={styles.select}
+                                            value={nameColumn}
+                                            onChange={(event) =>
+                                                setNameColumn(event.target.value)
+                                            }
+                                        >
+                                            <option value="">No name column</option>
+                                            {headers.map((header) => (
+                                                <option key={header} value={header}>
+                                                    {header}
+                                                </option>
+                                            ))}
+                                        </select>
+                                    </label>
+
+                                    <label className={styles.field}>
+                                        <span className={styles.labelSmall}>Mobile column</span>
+                                        <select
+                                            className={styles.select}
+                                            value={numberColumn}
+                                            onChange={(event) =>
+                                                setNumberColumn(event.target.value)
+                                            }
+                                        >
+                                            <option value="">Choose a column</option>
+                                            {headers.map((header) => (
+                                                <option key={header} value={header}>
+                                                    {header}
+                                                </option>
+                                            ))}
+                                        </select>
+                                    </label>
+
+                                    <button
+                                        type="button"
+                                        className={styles.primaryButton}
+                                        onClick={takeImported}
+                                        disabled={importedRows.length === 0}
+                                    >
+                                        Add {importedRows.length}{' '}
+                                        {importedRows.length === 1 ? 'row' : 'rows'}
+                                    </button>
+
+                                    <p className={styles.help}>
+                                        Every other column travels with the row and can be
+                                        used in the message.
+                                    </p>
+                                </div>
+                            )}
+                        </section>
+
+                        <section className={styles.campaignSource}>
+                            <h3 className={styles.campaignSourceTitle}>
+                                <Megaphone size={15} strokeWidth={2} aria-hidden="true" />
+                                Typed or pasted
+                            </h3>
+
+                            <textarea
+                                className={styles.textarea}
+                                rows={6}
+                                value={paste}
+                                placeholder={'Jane Fraser, 0412 345 678\n0498 765 432'}
+                                aria-label="Paste recipients"
+                                onChange={(event) => setPaste(event.target.value)}
+                            />
+
+                            <p className={styles.help}>
+                                One person per line, name first. A line with nothing but a
+                                number is taken as a number with no name.
+                            </p>
+
+                            <button
+                                type="button"
+                                className={styles.primaryButton}
+                                onClick={takePasted}
+                                disabled={paste.trim() === ''}
+                            >
+                                <Plus size={14} strokeWidth={2} aria-hidden="true" />
+                                Add these
+                            </button>
+                        </section>
+                    </div>
+
+                    {capped && (
+                        <p className={`${styles.banner} ${styles.bannerWarn}`} role="status">
+                            <TriangleAlert size={14} strokeWidth={2} aria-hidden="true" />
+                            <span>
+                                <strong>Stopped at {maxRecipients}.</strong> That is the
+                                most one campaign takes — send the rest as a second one.
+                            </span>
+                        </p>
+                    )}
+
+                    <div className={styles.campaignCount}>
+                        <strong>
+                            {rows.length} {rows.length === 1 ? 'recipient' : 'recipients'}
+                        </strong>
+                        {badNumbers > 0 && (
+                            <span className={styles.muted}>
+                                {' '}
+                                · {badNumbers} do not read as a phone number
+                            </span>
+                        )}
+                    </div>
+
+                    <div className={styles.tableWrap}>
+                        <table className={styles.table}>
+                            <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Mobile</th>
+                                    <th>Other columns</th>
+                                    <th className={styles.actionsHead}>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {rows.map((row, index) => {
+                                    const bad = !looksLikeNumber(row.number);
+
+                                    return (
+                                        <tr key={`${row.number}-${index}`}>
+                                            <td>
+                                                <strong>
+                                                    {row.name || (
+                                                        <span className={styles.muted}>
+                                                            No name
+                                                        </span>
+                                                    )}
+                                                </strong>
+                                            </td>
+                                            <td className={styles.numberCell}>
+                                                {normaliseNumberForDisplay(row.number) ||
+                                                    row.number}
+                                                {bad && (
+                                                    <span
+                                                        className={`${styles.pill} ${styles.pillWarn} ${styles.campaignFlag}`}
+                                                    >
+                                                        Check this
+                                                    </span>
+                                                )}
+                                            </td>
+                                            <td>
+                                                <span className={styles.chipRow}>
+                                                    {Object.entries(row.extra || {}).map(
+                                                        ([key, value]) => (
+                                                            <span
+                                                                key={key}
+                                                                className={styles.staffChip}
+                                                            >
+                                                                {key}: {value}
+                                                            </span>
+                                                        )
+                                                    )}
+                                                </span>
+                                            </td>
+                                            <td className={styles.actionsCell}>
+                                                <button
+                                                    type="button"
+                                                    className={styles.dangerLink}
+                                                    onClick={() => removeRow(index)}
+                                                >
+                                                    Remove
+                                                </button>
+                                            </td>
+                                        </tr>
+                                    );
+                                })}
+
+                                {rows.length === 0 && (
+                                    <tr>
+                                        <td colSpan={4} className={styles.tableEmpty}>
+                                            <p>
+                                                Nobody on the list yet. Drop a file or paste
+                                                some lines above.
+                                            </p>
+                                        </td>
+                                    </tr>
+                                )}
+                            </tbody>
+                        </table>
+                    </div>
+                </>
+            )}
+
+            {step === 2 && (
+                <div className={styles.campaignCompose}>
+                    <div className={styles.campaignComposeMain}>
+                        <label className={styles.field}>
+                            <span className={styles.labelSmall}>Send from</span>
+                            <select
+                                className={styles.select}
+                                value={lineId}
+                                onChange={(event) => setLineId(event.target.value)}
+                            >
+                                {activeLines.length === 0 && (
+                                    <option value="">No lines available</option>
+                                )}
+                                {activeLines.map((one) => (
+                                    <option key={one.id} value={one.id}>
+                                        {(one.label || 'Line') +
+                                            ' · ' +
+                                            (one.display_number ||
+                                                normaliseNumberForDisplay(one.phone_number))}
+                                    </option>
+                                ))}
+                            </select>
+                        </label>
+
+                        <label className={styles.field}>
+                            <span className={styles.labelSmall}>Campaign name</span>
+                            <input
+                                type="text"
+                                className={styles.input}
+                                value={name}
+                                autoComplete="off"
+                                onChange={(event) => {
+                                    setNameTouched(true);
+                                    setName(event.target.value);
+                                }}
+                            />
+                            <p className={styles.help}>
+                                Only staff see this. It is what the campaign is called in
+                                the list.
+                            </p>
+                        </label>
+
+                        <div className={styles.field}>
+                            <span className={styles.labelSmall}>Message</span>
+
+                            <div className={styles.chips}>
+                                {placeholders.map((token) => (
+                                    <button
+                                        key={token}
+                                        type="button"
+                                        className={styles.chip}
+                                        onClick={() => insertPlaceholder(token)}
+                                    >
+                                        {token}
+                                    </button>
+                                ))}
+                            </div>
+
+                            <textarea
+                                ref={bodyRef}
+                                className={styles.textarea}
+                                rows={6}
+                                value={body}
+                                placeholder="Hi {first_name}, …"
+                                aria-label="Message"
+                                onChange={(event) => setBody(event.target.value)}
+                            />
+
+                            <p
+                                className={`${styles.counter} ${
+                                    overBodyLimit ? styles.counterOver : ''
+                                }`}
+                            >
+                                {counts.characters} characters · {counts.segments} SMS ·{' '}
+                                {counts.encoding}
+                                {bodyLimit > 0 ? ` · ${bodyLimit} allowed` : ''}
+                            </p>
+
+                            {overBodyLimit && (
+                                <p className={styles.fieldError}>
+                                    That is longer than one campaign message may be.
+                                </p>
+                            )}
+
+                            {footer !== '' && (
+                                <p className={styles.help}>
+                                    {footerRequired ? 'Added to every message: ' : 'Footer: '}
+                                    <span className={styles.campaignFooter}>{footer}</span>
+                                </p>
+                            )}
+                        </div>
+                    </div>
+
+                    <aside className={styles.campaignPreview}>
+                        <h3 className={styles.campaignSourceTitle}>
+                            Preview
+                            {previewing && (
+                                <Loader2
+                                    size={13}
+                                    className={styles.spin}
+                                    aria-label="Loading"
+                                />
+                            )}
+                        </h3>
+
+                        <p className={styles.help}>
+                            The first few recipients, rendered by the server — the same
+                            code that fills the placeholders when the campaign runs.
+                        </p>
+
+                        {previews.length === 0 ? (
+                            <p className={styles.help}>
+                                {body.trim() === ''
+                                    ? 'Write a message to see it filled in.'
+                                    : 'Nothing to preview yet.'}
+                            </p>
+                        ) : (
+                            <ul className={styles.campaignPreviewList}>
+                                {previews.map((preview, index) => (
+                                    <li
+                                        key={`${preview.number}-${index}`}
+                                        className={styles.campaignPreviewItem}
+                                    >
+                                        <span className={styles.campaignPreviewWho}>
+                                            <span className={styles.avatar} aria-hidden="true">
+                                                {initialsFor(preview.name || preview.number)}
+                                            </span>
+                                            <span>
+                                                <strong>{preview.name || 'No name'}</strong>
+                                                <small>
+                                                    {normaliseNumberForDisplay(preview.number)}
+                                                </small>
+                                            </span>
+                                        </span>
+                                        <p className={styles.campaignPreviewBody}>
+                                            {preview.body}
+                                        </p>
+                                        <span className={styles.counter}>
+                                            {preview.segments}{' '}
+                                            {preview.segments === 1 ? 'SMS' : 'SMS parts'}
+                                        </span>
+                                    </li>
+                                ))}
+                            </ul>
+                        )}
+                    </aside>
+                </div>
+            )}
+
+            {step === 3 && (
+                <div className={styles.campaignReview}>
+                    {createError !== '' && (
+                        <p className={`${styles.banner} ${styles.bannerBad}`} role="alert">
+                            <TriangleAlert size={14} strokeWidth={2} aria-hidden="true" />
+                            <span>{createError}</span>
+                        </p>
+                    )}
+
+                    <div className={styles.campaignFacts}>
+                        <div className={styles.statusItem}>
+                            <span className={styles.statusLabel}>Recipients</span>
+                            <span className={styles.statusValue}>{rows.length}</span>
+                        </div>
+                        <div className={styles.statusItem}>
+                            <span className={styles.statusLabel}>Line</span>
+                            <span className={styles.statusValue}>
+                                {line ? line.label || 'Line' : '—'}
+                            </span>
+                        </div>
+                        <div className={styles.statusItem}>
+                            <span className={styles.statusLabel}>Parts per message</span>
+                            <span className={styles.statusValue}>{counts.segments}</span>
+                        </div>
+                        <div className={styles.statusItem}>
+                            <span className={styles.statusLabel}>Time to send</span>
+                            <span className={styles.statusValue}>
+                                about {estimateMinutes(rows.length, settings.per_minute)}{' '}
+                                min
+                            </span>
+                        </div>
+
+                        <p className={styles.statusMeaning}>
+                            Parts are counted on the message as written. A placeholder
+                            that fills with a long name can push a borderline message on
+                            to another part.
+                        </p>
+                    </div>
+
+                    {report && (
+                        <div className={styles.campaignReport}>
+                            <p className={`${styles.banner} ${styles.bannerOk}`}>
+                                <span>
+                                    <strong>
+                                        {Number(report.accepted) || 0}{' '}
+                                        {Number(report.accepted) === 1
+                                            ? 'recipient'
+                                            : 'recipients'}{' '}
+                                        accepted.
+                                    </strong>
+                                    {Number(report.duplicates) > 0
+                                        ? ` ${report.duplicates} duplicate ${
+                                              Number(report.duplicates) === 1
+                                                  ? 'number was'
+                                                  : 'numbers were'
+                                          } dropped.`
+                                        : ' No duplicates.'}
+                                </span>
+                            </p>
+
+                            {(report.opted_out || []).length > 0 && (
+                                <section className={styles.section}>
+                                    <h3 className={styles.campaignSourceTitle}>
+                                        <CircleSlash
+                                            size={15}
+                                            strokeWidth={2}
+                                            aria-hidden="true"
+                                        />
+                                        Opted out
+                                    </h3>
+                                    <p className={styles.help}>
+                                        These numbers have asked not to be messaged, so
+                                        nothing will be sent to them.
+                                    </p>
+                                    <span className={styles.chipRow}>
+                                        {report.opted_out.map((one, index) => (
+                                            <span
+                                                key={`${one.number}-${index}`}
+                                                className={styles.staffChip}
+                                            >
+                                                {one.name || normaliseNumberForDisplay(one.number)}
+                                            </span>
+                                        ))}
+                                    </span>
+                                </section>
+                            )}
+
+                            {(report.invalid || []).length > 0 && (
+                                <section className={styles.section}>
+                                    <h3 className={styles.campaignSourceTitle}>
+                                        <TriangleAlert
+                                            size={15}
+                                            strokeWidth={2}
+                                            aria-hidden="true"
+                                        />
+                                        Rows that could not be used
+                                    </h3>
+                                    <div className={styles.tableWrap}>
+                                        <table className={styles.table}>
+                                            <thead>
+                                                <tr>
+                                                    <th>Row</th>
+                                                    <th>Name</th>
+                                                    <th>Number</th>
+                                                    <th>Why</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                {report.invalid.map((one, index) => (
+                                                    <tr key={`${one.row}-${index}`}>
+                                                        <td className={styles.numberCell}>
+                                                            {one.row}
+                                                        </td>
+                                                        <td>
+                                                            {one.name || (
+                                                                <span className={styles.muted}>
+                                                                    No name
+                                                                </span>
+                                                            )}
+                                                        </td>
+                                                        <td className={styles.numberCell}>
+                                                            {one.number}
+                                                        </td>
+                                                        <td>{one.reason}</td>
+                                                    </tr>
+                                                ))}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </section>
+                            )}
+                        </div>
+                    )}
+                </div>
+            )}
+
+            <div className={styles.campaignFoot}>
+                {step > 1 && (
+                    <button
+                        type="button"
+                        className={styles.ghostButton}
+                        onClick={() => setStep(step - 1)}
+                        disabled={created !== null}
+                    >
+                        <ArrowLeft size={14} strokeWidth={2} aria-hidden="true" />
+                        Back
+                    </button>
+                )}
+
+                {step < 3 && (
+                    <button
+                        type="button"
+                        className={styles.primaryButton}
+                        onClick={() => setStep(step + 1)}
+                        disabled={step === 1 ? !canLeaveOne : !canLeaveTwo}
+                    >
+                        Next
+                        <ArrowRight size={14} strokeWidth={2} aria-hidden="true" />
+                    </button>
+                )}
+
+                {step === 3 && created === null && (
+                    <button
+                        type="button"
+                        className={styles.primaryButton}
+                        onClick={create}
+                        disabled={creating || rows.length === 0}
+                    >
+                        {creating && (
+                            <Loader2 size={14} className={styles.spin} aria-hidden="true" />
+                        )}
+                        Create campaign
+                    </button>
+                )}
+
+                {step === 3 && created !== null && (
+                    <>
+                        <button
+                            type="button"
+                            className={styles.ghostButton}
+                            onClick={onSaved}
+                        >
+                            Save as draft
+                        </button>
+                        <button
+                            type="button"
+                            className={styles.primaryButton}
+                            onClick={start}
+                            disabled={starting}
+                        >
+                            {starting ? (
+                                <Loader2 size={14} className={styles.spin} aria-hidden="true" />
+                            ) : (
+                                <Send size={14} strokeWidth={2} aria-hidden="true" />
+                            )}
+                            Start sending
+                        </button>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+};
+
+/* --------------------------------------------------------------- the detail */
+
+const CampaignDetail = ({
+    routes,
+    campaignId,
+    canManage,
+    inboxUrl,
+    pollMs,
+    navigate,
+    onBack,
+}) => {
+    const [campaign, setCampaign] = useState(null);
+    const [recipients, setRecipients] = useState([]);
+    const [meta, setMeta] = useState(null);
+    const [status, setStatus] = useState('');
+    const [page, setPage] = useState(1);
+    const [loading, setLoading] = useState(true);
+    const [acting, setActing] = useState(false);
+
+    const mountedRef = useRef(true);
+
+    useEffect(
+        () => () => {
+            mountedRef.current = false;
+        },
+        []
+    );
+
+    const loadCampaign = useCallback(() => {
+        CustomFetch(
+            routes.campaign(campaignId),
+            'GET',
+            null,
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setCampaign(result?.campaign ?? null);
+                setLoading(false);
+            },
+            () => {
+                if (mountedRef.current) setLoading(false);
+            }
+        ).catch(() => {
+            if (mountedRef.current) setLoading(false);
+        });
+    }, [routes, campaignId]);
+
+    const loadRecipients = useCallback(() => {
+        CustomFetch(
+            routes.campaignRecipients(campaignId),
+            'GET',
+            { status: status === '' ? null : status, page },
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setRecipients(Array.isArray(result?.recipients) ? result.recipients : []);
+                setMeta(result?.meta ?? null);
+            },
+            () => {}
+        ).catch(() => {});
+    }, [routes, campaignId, status, page]);
+
+    useEffect(() => {
+        loadCampaign();
+    }, [loadCampaign]);
+
+    useEffect(() => {
+        loadRecipients();
+    }, [loadRecipients]);
+
+    // While it is sending, both halves move: the counters and the rows. The
+    // poll stops the moment the campaign does, so a completed campaign left
+    // open on somebody's second monitor costs nothing.
+    const sending = campaign?.status === 'sending';
+
+    useEffect(() => {
+        if (!sending || !pollMs) return undefined;
+
+        const handle = setInterval(() => {
+            loadCampaign();
+            loadRecipients();
+        }, pollMs);
+
+        return () => clearInterval(handle);
+    }, [sending, pollMs, loadCampaign, loadRecipients]);
+
+    /**
+     * Every action is the same shape: post, then re-read the campaign.
+     *
+     * Nothing is painted ahead of the answer. A Pause that greyed itself out
+     * and then lost a race with the sender would leave the screen saying
+     * "paused" while messages carried on going out, which is the one lie this
+     * page must never tell.
+     */
+    const act = (url, confirmation) => {
+        const run = () => {
+            setActing(true);
+
+            CustomFetch(
+                url,
+                'POST',
+                {},
+                (result) => {
+                    if (!mountedRef.current) return;
+
+                    setActing(false);
+                    setCampaign(result?.campaign ?? null);
+                    loadRecipients();
+                },
+                (message) => {
+                    if (!mountedRef.current) return;
+
+                    setActing(false);
+                    toast.error(asPlainText(message) || 'That could not be done.');
+                    loadCampaign();
+                }
+            ).catch(() => {
+                if (mountedRef.current) setActing(false);
+            });
+        };
+
+        if (!confirmation) {
+            run();
+
+            return;
+        }
+
+        showConfirmDialog({ ...confirmation, onConfirm: run });
+    };
+
+    const remove = () => {
+        showConfirmDialog({
+            title: 'Delete this draft?',
+            message: 'The recipient list goes with it. Nothing has been sent.',
+            confirmLabel: 'Delete',
+            cancelLabel: 'Keep it',
+            data: { name: campaign?.name },
+            onConfirm: () => {
+                CustomFetch(
+                    routes.campaign(campaignId),
+                    'DELETE',
+                    {},
+                    () => {
+                        toast.success('Draft deleted');
+                        onBack();
+                    },
+                    null
+                ).catch(() => {});
+            },
+        });
+    };
+
+    if (loading && campaign === null) {
+        return (
+            <div className={styles.tableEmpty}>
+                <Loader2 size={18} className={styles.spin} aria-label="Loading" />
+            </div>
+        );
+    }
+
+    if (campaign === null) {
+        return (
+            <div className={styles.tableEmpty}>
+                <p>That campaign could not be opened. It may have been deleted.</p>
+                <button type="button" className={styles.ghostButton} onClick={onBack}>
+                    <ArrowLeft size={14} strokeWidth={2} aria-hidden="true" />
+                    Back to campaigns
+                </button>
+            </div>
+        );
+    }
+
+    const counts = campaign.counts || {};
+    const failed = Number(counts.failed) || 0;
+
+    return (
+        <div className={styles.campaignDetail}>
+            <div className={styles.sectionHead}>
+                <div className={styles.campaignHeading}>
+                    <button type="button" className={styles.linkButton} onClick={onBack}>
+                        <ArrowLeft size={14} strokeWidth={2} aria-hidden="true" />
+                        Campaigns
+                    </button>
+                    <h2 className={styles.sectionTitle}>
+                        {campaign.name || 'Untitled campaign'}
+                    </h2>
+                    <p className={styles.help}>
+                        {campaign.line?.label || 'No line'}
+                        {campaign.line?.display_number
+                            ? ` · ${campaign.line.display_number}`
+                            : ''}
+                        {campaign.user?.name ? ` · created by ${campaign.user.name}` : ''}
+                    </p>
+                </div>
+
+                <div className={styles.headActions}>
+                    <StatusChip status={campaign.status} />
+
+                    {canManage && campaign.status === 'draft' && (
+                        <>
+                            <button
+                                type="button"
+                                className={styles.primaryButton}
+                                onClick={() => act(routes.campaignStart(campaign.id))}
+                                disabled={acting}
+                            >
+                                <Send size={14} strokeWidth={2} aria-hidden="true" />
+                                Start
+                            </button>
+                            <button
+                                type="button"
+                                className={styles.ghostButton}
+                                onClick={remove}
+                            >
+                                <Trash2 size={14} strokeWidth={2} aria-hidden="true" />
+                                Delete
+                            </button>
+                        </>
+                    )}
+
+                    {canManage && campaign.status === 'sending' && (
+                        <>
+                            <button
+                                type="button"
+                                className={styles.ghostButton}
+                                onClick={() => act(routes.campaignPause(campaign.id))}
+                                disabled={acting}
+                            >
+                                <Pause size={14} strokeWidth={2} aria-hidden="true" />
+                                Pause
+                            </button>
+                            <button
+                                type="button"
+                                className={styles.ghostButton}
+                                onClick={() =>
+                                    act(routes.campaignCancel(campaign.id), {
+                                        title: 'Cancel this campaign?',
+                                        message:
+                                            'Everybody still waiting is dropped. Messages already sent cannot be taken back.',
+                                        confirmLabel: 'Cancel it',
+                                        cancelLabel: 'Keep sending',
+                                    })
+                                }
+                                disabled={acting}
+                            >
+                                <Ban size={14} strokeWidth={2} aria-hidden="true" />
+                                Cancel
+                            </button>
+                        </>
+                    )}
+
+                    {canManage && campaign.status === 'paused' && (
+                        <>
+                            <button
+                                type="button"
+                                className={styles.primaryButton}
+                                onClick={() => act(routes.campaignStart(campaign.id))}
+                                disabled={acting}
+                            >
+                                <Play size={14} strokeWidth={2} aria-hidden="true" />
+                                Resume
+                            </button>
+                            <button
+                                type="button"
+                                className={styles.ghostButton}
+                                onClick={() =>
+                                    act(routes.campaignCancel(campaign.id), {
+                                        title: 'Cancel this campaign?',
+                                        message:
+                                            'Everybody still waiting is dropped. Messages already sent cannot be taken back.',
+                                        confirmLabel: 'Cancel it',
+                                        cancelLabel: 'Keep it paused',
+                                    })
+                                }
+                                disabled={acting}
+                            >
+                                <Ban size={14} strokeWidth={2} aria-hidden="true" />
+                                Cancel
+                            </button>
+                        </>
+                    )}
+
+                    {canManage && campaign.status === 'completed' && failed > 0 && (
+                        <button
+                            type="button"
+                            className={styles.ghostButton}
+                            onClick={() => act(routes.campaignRetryFailed(campaign.id))}
+                            disabled={acting}
+                        >
+                            <RotateCcw size={14} strokeWidth={2} aria-hidden="true" />
+                            Retry {failed} failed
+                        </button>
+                    )}
+                </div>
+            </div>
+
+            {campaign.last_error && (
+                <p className={`${styles.banner} ${styles.bannerBad}`} role="status">
+                    <TriangleAlert size={14} strokeWidth={2} aria-hidden="true" />
+                    <strong>Last error</strong>
+                    <span className={styles.bannerNote}>{campaign.last_error}</span>
+                </p>
+            )}
+
+            <ProgressBar campaign={campaign} />
+
+            <div className={styles.campaignFacts}>
+                <div className={styles.statusItem}>
+                    <span className={styles.statusLabel}>Sent</span>
+                    <span className={styles.statusValue}>{counts.sent ?? 0}</span>
+                </div>
+                <div className={styles.statusItem}>
+                    <span className={styles.statusLabel}>Pending</span>
+                    <span className={styles.statusValue}>{counts.pending ?? 0}</span>
+                </div>
+                <div className={styles.statusItem}>
+                    <span className={styles.statusLabel}>Failed</span>
+                    <span className={styles.statusValue}>{counts.failed ?? 0}</span>
+                </div>
+                <div className={styles.statusItem}>
+                    <span className={styles.statusLabel}>Skipped</span>
+                    <span className={styles.statusValue}>{counts.skipped ?? 0}</span>
+                </div>
+
+                {sending && typeof campaign.estimated_minutes_remaining === 'number' && (
+                    <p className={styles.statusMeaning}>
+                        About {campaign.estimated_minutes_remaining} minutes left at this
+                        line's sending rate.
+                    </p>
+                )}
+            </div>
+
+            {/* Folded, because the message is the thing everybody has already
+                read and the counters are what they came back for. */}
+            <details className={styles.campaignFold}>
+                <summary>The message</summary>
+                <p className={styles.campaignFoldBody}>{campaign.body}</p>
+                {campaign.footer && (
+                    <p className={styles.help}>
+                        Footer: <span className={styles.campaignFooter}>{campaign.footer}</span>
+                    </p>
+                )}
+            </details>
+
+            <div className={styles.chips}>
+                {RECIPIENT_FILTERS.map((one) => (
+                    <button
+                        key={one.id || 'all'}
+                        type="button"
+                        className={`${styles.chip} ${
+                            status === one.id ? styles.chipActive : ''
+                        }`}
+                        aria-pressed={status === one.id}
+                        onClick={() => {
+                            setStatus(one.id);
+                            setPage(1);
+                        }}
+                    >
+                        {one.label}
+                    </button>
+                ))}
+            </div>
+
+            <div className={styles.tableWrap}>
+                <table className={styles.table}>
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Mobile</th>
+                            <th>Status</th>
+                            <th>Error</th>
+                            <th>Sent</th>
+                            <th className={styles.actionsHead}>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {recipients.map((one) => (
+                            <tr key={one.id}>
+                                <td>
+                                    <strong>
+                                        {one.name || (
+                                            <span className={styles.muted}>No name</span>
+                                        )}
+                                    </strong>
+                                </td>
+                                <td className={styles.numberCell}>
+                                    {one.display_number ||
+                                        normaliseNumberForDisplay(one.number)}
+                                </td>
+                                <td>
+                                    <StatusChip
+                                        status={one.status}
+                                        table={RECIPIENT_STATUSES}
+                                    />
+                                </td>
+                                <td>
+                                    {one.error || <span className={styles.muted}>—</span>}
+                                </td>
+                                <td>
+                                    {one.sent_at ? (
+                                        relativeTime(one.sent_at)
+                                    ) : (
+                                        <span className={styles.muted}>—</span>
+                                    )}
+                                </td>
+                                <td className={styles.actionsCell}>
+                                    {one.thread_id ? (
+                                        <a
+                                            className={styles.linkButton}
+                                            href={`${inboxUrl}?thread=${one.thread_id}`}
+                                            onClick={(event) =>
+                                                openInInbox(
+                                                    event,
+                                                    `${inboxUrl}?thread=${one.thread_id}`,
+                                                    navigate
+                                                )
+                                            }
+                                        >
+                                            Open conversation
+                                            <ExternalLink
+                                                size={11}
+                                                strokeWidth={2.2}
+                                                aria-hidden="true"
+                                            />
+                                        </a>
+                                    ) : (
+                                        <span className={styles.muted}>—</span>
+                                    )}
+                                </td>
+                            </tr>
+                        ))}
+
+                        {recipients.length === 0 && (
+                            <tr>
+                                <td colSpan={6} className={styles.tableEmpty}>
+                                    <p>
+                                        {status === ''
+                                            ? 'No recipients on this campaign.'
+                                            : `Nobody is ${status} on this campaign.`}
+                                    </p>
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            </div>
+
+            {meta && Number(meta.last_page) > 1 && (
+                <div className={styles.campaignPager}>
+                    <button
+                        type="button"
+                        className={styles.ghostButton}
+                        onClick={() => setPage((current) => Math.max(1, current - 1))}
+                        disabled={Number(meta.current_page) <= 1}
+                    >
+                        <ArrowLeft size={14} strokeWidth={2} aria-hidden="true" />
+                        Previous
+                    </button>
+                    <span className={styles.help}>
+                        Page {meta.current_page} of {meta.last_page} · {meta.total}{' '}
+                        recipients
+                    </span>
+                    <button
+                        type="button"
+                        className={styles.ghostButton}
+                        onClick={() =>
+                            setPage((current) =>
+                                Math.min(Number(meta.last_page) || 1, current + 1)
+                            )
+                        }
+                        disabled={Number(meta.current_page) >= Number(meta.last_page)}
+                    >
+                        Next
+                        <ArrowRight size={14} strokeWidth={2} aria-hidden="true" />
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};
+
+/* ------------------------------------------------------------------ the page */
+
+/**
+ * Bulk SMS: a list of campaigns, the three-step flow that builds one, and one
+ * campaign's own page.
+ *
+ * Three views in one component rather than three routed pages, because the
+ * consumer mounts one screen and a campaign is a short-lived thing somebody
+ * builds, starts and watches in a single sitting. Only the detail view is
+ * worth a link, so only the detail view writes to the address bar —
+ * `?campaign=<id>`, read once on mount and kept in step with
+ * `history.replaceState`, exactly as `SmsInbox` handles `?thread=`. A
+ * half-built campaign is not something a URL could restore, so the wizard's
+ * step is deliberately not in it.
+ *
+ * Lines come from the same `GET lines` the inbox reads. The settings that
+ * bound a campaign — the per-minute rate, the cap, the footer, the body limit
+ * — ride the campaign LIST response rather than a second request, because
+ * every one of them is a fact about the module rather than about a campaign
+ * and the list is what this page fetches first anyway.
+ */
+const SmsCampaignsInner = ({
+    endpoints,
+    // Accepted so the page matches the prop shape every other CRM screen is
+    // mounted with, even though nothing here reads it.
+    userProfile: _userProfile = null,
+    canManage = true,
+    pageTitle = 'SMS campaigns',
+    inboxUrl = '/messages',
+    pollMs = 5000,
+    // Supplied by withVaultNavigation. Threaded down to CampaignDetail so a
+    // recipient's "Open conversation" is a router navigation rather than a
+    // new-tab hand-off — see the link itself for why that matters.
+    navigate,
+    locationSearch,
+}) => {
+    const routes = useMemo(() => resolveSmsEndpoints(endpoints), [endpoints]);
+
+    const [campaigns, setCampaigns] = useState([]);
+    const [settings, setSettings] = useState(DEFAULT_CAMPAIGN_SETTINGS);
+    const [lines, setLines] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [optOutsOpen, setOptOutsOpen] = useState(false);
+
+    const [openId, setOpenId] = useState(() => campaignIdFromSearch(locationSearch));
+    const [view, setView] = useState(() =>
+        campaignIdFromSearch(locationSearch) ? 'detail' : 'list'
+    );
+
+    const mountedRef = useRef(true);
+
+    useEffect(
+        () => () => {
+            mountedRef.current = false;
+        },
+        []
+    );
+
+    const loadCampaigns = useCallback(() => {
+        CustomFetch(
+            routes.campaigns,
+            'GET',
+            null,
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setCampaigns(Array.isArray(result?.campaigns) ? result.campaigns : []);
+                setSettings({
+                    ...DEFAULT_CAMPAIGN_SETTINGS,
+                    ...(result?.settings || {}),
+                });
+                setLoading(false);
+            },
+            () => {
+                if (mountedRef.current) setLoading(false);
+            }
+        ).catch(() => {
+            if (mountedRef.current) setLoading(false);
+        });
+    }, [routes]);
+
+    useEffect(() => {
+        loadCampaigns();
+
+        CustomFetch(
+            routes.lines,
+            'GET',
+            null,
+            (result) => {
+                if (!mountedRef.current) return;
+
+                // `{lines}` is the campaign contract's spelling and `{data}` is
+                // what the inbox's own `GET lines` has always answered. Both
+                // are read rather than one being picked, so this page works
+                // against either without a second route.
+                const answered = Array.isArray(result?.lines)
+                    ? result.lines
+                    : Array.isArray(result?.data)
+                      ? result.data
+                      : [];
+
+                setLines(answered);
+            },
+            () => {}
+        ).catch(() => {});
+    }, [routes, loadCampaigns]);
+
+    // The list only moves while something is sending, so that is the only time
+    // it is polled. A page of finished campaigns makes no requests at all.
+    const anySending = campaigns.some((one) => one.status === 'sending');
+
+    useEffect(() => {
+        if (view !== 'list' || !anySending || !pollMs) return undefined;
+
+        const handle = setInterval(loadCampaigns, pollMs);
+
+        return () => clearInterval(handle);
+    }, [view, anySending, pollMs, loadCampaigns]);
+
+    const openCampaign = useCallback((campaignId) => {
+        setOpenId(campaignId);
+        setView('detail');
+        syncCampaignInUrl(campaignId);
+    }, []);
+
+    const backToList = useCallback(() => {
+        setOpenId(null);
+        setView('list');
+        syncCampaignInUrl(null);
+        loadCampaigns();
+    }, [loadCampaigns]);
+
+    return (
+        <div className={styles.settings}>
+            <div className={styles.settingsHead}>
+                <div>
+                    <h1 className={styles.pageTitle}>
+                        <Megaphone size={22} strokeWidth={2.2} aria-hidden="true" />
+                        {pageTitle}
+                    </h1>
+                    <p className={styles.pageIntro}>
+                        One message to a list of numbers, sent one at a time from a line
+                        you choose. Replies come back to the inbox like any other
+                        conversation.
+                    </p>
+                </div>
+            </div>
+
+            {view === 'list' && (
+                <CampaignList
+                    campaigns={campaigns}
+                    loading={loading}
+                    canManage={canManage}
+                    onNew={() => setView('new')}
+                    onOpen={openCampaign}
+                    onOptOuts={() => setOptOutsOpen(true)}
+                />
+            )}
+
+            {view === 'new' && (
+                <CampaignWizard
+                    routes={routes}
+                    settings={settings}
+                    lines={lines}
+                    onCancel={backToList}
+                    onSaved={backToList}
+                    onOpen={openCampaign}
+                />
+            )}
+
+            {view === 'detail' && openId !== null && (
+                <CampaignDetail
+                    routes={routes}
+                    campaignId={openId}
+                    canManage={canManage}
+                    inboxUrl={inboxUrl}
+                    pollMs={pollMs}
+                    navigate={navigate}
+                    onBack={backToList}
+                />
+            )}
+
+            {optOutsOpen && (
+                <OptOutManager
+                    routes={routes}
+                    canManage={canManage}
+                    onClose={() => setOptOutsOpen(false)}
+                />
+            )}
+        </div>
+    );
+};
+
+export const SmsCampaigns = withVaultNavigation(SmsCampaignsInner);
+
+export default SmsCampaigns;