@visns-studio/visns-components 6.34.0 → 6.34.3

package/src/components/emailCampaigns/EmailLists.jsx

@@ -0,0 +1,505 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { FileUp, RefreshCw, Trash2, Users } from 'lucide-react';
+import { toast } from 'react-toastify';
+
+import StandardModal from '../generic/StandardModal';
+import { showConfirmDialog } from '../generic/ConfirmationDialog';
+import useDebouncedValue from '../vault/useDebouncedValue';
+import { cellText, guessColumn, readSheetRows, readSpreadsheet } from '../sms/SmsCampaigns';
+import styles from '../styles/EmailCampaigns.module.scss';
+import { api, formatWhen } from './emailCampaignApi';
+
+/**
+ * Who campaigns go to.
+ *
+ * A list is either built from the host's contacts (pick clients, tick options,
+ * and it is re-read on Refresh so a client's new contact is on the next
+ * campaign), or imported from a spreadsheet. Either way it is copied to Resend
+ * in the background, and the row says how far that has got.
+ */
+const EMAIL_HINTS = [/^e-?mail/i, /email/i];
+const FIRST_HINTS = [/^first/i, /given/i];
+const LAST_HINTS = [/^last/i, /surname/i, /family/i];
+const COMPANY_HINTS = [/company/i, /organi[sz]ation/i, /business/i, /client/i];
+
+const EmailLists = ({ lists, routes, canManage, settings, onChanged, openListId, onOpenList }) => {
+    const [creating, setCreating] = useState(false);
+
+    return (
+        <div className={styles.tabBody}>
+            <div className={styles.toolbar}>
+                <p className={styles.quiet}>
+                    Lists are copied to Resend in the background, a few hundred people a minute.
+                </p>
+                {canManage && (
+                    <button
+                        type="button"
+                        className={styles.buttonPrimary}
+                        title="Build a list from your contacts, or import one"
+                        onClick={() => setCreating(true)}
+                    >
+                        <Users size={14} aria-hidden="true" />
+                        New list
+                    </button>
+                )}
+            </div>
+
+            {lists.length === 0 ? (
+                <p className={styles.state}>No lists yet. A campaign needs a list to go to.</p>
+            ) : (
+                <table className={styles.table}>
+                    <thead>
+                        <tr>
+                            <th>List</th>
+                            <th>Kind</th>
+                            <th className={styles.num}>People</th>
+                            <th className={styles.num}>Unsubscribed</th>
+                            <th>Copied to Resend</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {lists.map((list) => (
+                            <tr key={list.id} className={styles.clickRow} onClick={() => onOpenList(list.id)}>
+                                <td>
+                                    <button type="button" className={styles.rowLink} title={`Open ${list.name}`}>
+                                        {list.name}
+                                    </button>
+                                    {list.description && <div className={styles.quiet}>{list.description}</div>}
+                                </td>
+                                <td>{list.kind === 'crm' ? 'From contacts' : 'Imported'}</td>
+                                <td className={styles.num}>{list.members}</td>
+                                <td className={styles.num}>{list.unsubscribed}</td>
+                                <td>
+                                    <SyncState list={list} />
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            )}
+
+            {creating && (
+                <NewListDialog
+                    routes={routes}
+                    settings={settings}
+                    onClose={() => setCreating(false)}
+                    onCreated={(list) => {
+                        setCreating(false);
+                        onChanged();
+                        onOpenList(list.id);
+                    }}
+                />
+            )}
+
+            {openListId && (
+                <ListDetail
+                    id={openListId}
+                    routes={routes}
+                    canManage={canManage}
+                    onClose={() => onOpenList(null)}
+                    onChanged={onChanged}
+                />
+            )}
+        </div>
+    );
+};
+
+const SyncState = ({ list }) => {
+    if (list.sync_error) {
+        return <span className={styles.bad}>{list.sync_error}</span>;
+    }
+
+    if (list.syncing) {
+        return <span className={styles.warn}>In progress ({list.pending} to go)</span>;
+    }
+
+    return (
+        <span>
+            <span className={styles.good}>Up to date</span>
+            {list.failed > 0 ? (
+                <span className={styles.warn} title="Resend would not take these addresses; open the list to see why">
+                    {' '}· {list.failed} refused
+                </span>
+            ) : null}
+            {list.synced_at ? <span className={styles.quiet}> · {formatWhen(list.synced_at)}</span> : null}
+        </span>
+    );
+};
+
+const NewListDialog = ({ routes, settings, onClose, onCreated }) => {
+    const source = settings?.source;
+    const [kind, setKind] = useState(source ? 'crm' : 'import');
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [groups, setGroups] = useState([]);
+    const [options, setOptions] = useState({});
+    const [sheet, setSheet] = useState(null);
+    const [columns, setColumns] = useState({ email: -1, first: -1, last: -1, company: -1 });
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState('');
+
+    const rows = useMemo(() => {
+        if (!sheet || columns.email < 0) return [];
+
+        return sheet.records.map((record) => ({
+            email: cellText(record[columns.email]),
+            first_name: columns.first >= 0 ? cellText(record[columns.first]) : '',
+            last_name: columns.last >= 0 ? cellText(record[columns.last]) : '',
+            company: columns.company >= 0 ? cellText(record[columns.company]) : '',
+        }));
+    }, [sheet, columns]);
+
+    const readFile = async (file) => {
+        if (!file) return;
+
+        setError('');
+
+        try {
+            const read = readSheetRows(await readSpreadsheet(file));
+            setSheet(read);
+            setColumns({
+                email: guessColumn(read.headers, EMAIL_HINTS),
+                first: guessColumn(read.headers, FIRST_HINTS),
+                last: guessColumn(read.headers, LAST_HINTS),
+                company: guessColumn(read.headers, COMPANY_HINTS),
+            });
+
+            if (!name) setName(file.name.replace(/\.[a-z0-9]+$/i, ''));
+        } catch (failure) {
+            setError('That file could not be read. A .csv or .xlsx exported from a spreadsheet is what this expects.');
+        }
+    };
+
+    const ready = name.trim() !== '' && (kind === 'crm' || rows.length > 0) && !busy;
+
+    const create = async () => {
+        setBusy(true);
+        setError('');
+
+        const result = await api(
+            routes.lists,
+            'POST',
+            kind === 'crm'
+                ? { name, description, kind, groups: groups.map((group) => group.id), options }
+                : { name, description, kind, rows }
+        );
+
+        setBusy(false);
+
+        if (result.ok && result.data?.list) {
+            toast.success(result.data.message || 'List created.');
+            onCreated(result.data.list);
+        } else {
+            setError(result.message || 'The list could not be created.');
+        }
+    };
+
+    return (
+        <StandardModal isOpen onClose={onClose} title="New list" size="medium" showHeader>
+            <div className={styles.dialog}>
+                {error && <p className={styles.fieldError}>{error}</p>}
+
+                {source && (
+                    <div className={styles.segmented} role="group" aria-label="Where the people come from">
+                        <button
+                            type="button"
+                            className={kind === 'crm' ? styles.segmentOn : styles.segment}
+                            aria-pressed={kind === 'crm'}
+                            onClick={() => setKind('crm')}
+                        >
+                            From your {source.noun?.plural || 'contacts'}
+                        </button>
+                        <button
+                            type="button"
+                            className={kind === 'import' ? styles.segmentOn : styles.segment}
+                            aria-pressed={kind === 'import'}
+                            onClick={() => setKind('import')}
+                        >
+                            Import a spreadsheet
+                        </button>
+                    </div>
+                )}
+
+                <label className={styles.field}>
+                    <span className={styles.fieldLabel}>Name</span>
+                    <input className={styles.input} value={name} maxLength={191} onChange={(event) => setName(event.target.value)} />
+                </label>
+
+                <label className={styles.field}>
+                    <span className={styles.fieldLabel}>Description (optional)</span>
+                    <input
+                        className={styles.input}
+                        value={description}
+                        maxLength={500}
+                        onChange={(event) => setDescription(event.target.value)}
+                    />
+                </label>
+
+                {kind === 'crm' ? (
+                    <>
+                        <GroupPicker
+                            routes={routes}
+                            noun={source?.noun}
+                            value={groups}
+                            onChange={setGroups}
+                        />
+                        {Object.entries(source?.options || {}).map(([key, label]) => (
+                            <label key={key} className={styles.check}>
+                                <input
+                                    type="checkbox"
+                                    checked={Boolean(options[key])}
+                                    onChange={(event) => setOptions({ ...options, [key]: event.target.checked })}
+                                />
+                                {label}
+                            </label>
+                        ))}
+                        <p className={styles.hint}>
+                            {groups.length === 0
+                                ? `No ${source?.noun?.plural || 'groups'} picked means every contact, of every ${source?.noun?.singular || 'group'}, with an email address.`
+                                : 'The list is re-read from these whenever you refresh it, so new contacts join automatically.'}
+                        </p>
+                    </>
+                ) : (
+                    <>
+                        <label className={styles.drop}>
+                            <FileUp size={18} aria-hidden="true" />
+                            <span>{sheet ? `${sheet.records.length} rows read. Choose another file to replace them.` : 'Choose a .csv or .xlsx file. It is read in this browser.'}</span>
+                            <input type="file" accept=".csv,.xlsx,.xls" hidden onChange={(event) => readFile(event.target.files?.[0])} />
+                        </label>
+
+                        {sheet && (
+                            <div className={styles.mapping}>
+                                {[
+                                    ['email', 'Email (required)'],
+                                    ['first', 'First name'],
+                                    ['last', 'Last name'],
+                                    ['company', 'Company'],
+                                ].map(([key, label]) => (
+                                    <label key={key} className={styles.field}>
+                                        <span className={styles.fieldLabel}>{label}</span>
+                                        <select
+                                            className={styles.select}
+                                            value={columns[key]}
+                                            onChange={(event) => setColumns({ ...columns, [key]: Number(event.target.value) })}
+                                        >
+                                            <option value={-1}>Not in the file</option>
+                                            {sheet.headers.map((header, index) => (
+                                                <option key={header} value={index}>
+                                                    {header}
+                                                </option>
+                                            ))}
+                                        </select>
+                                    </label>
+                                ))}
+                            </div>
+                        )}
+
+                        {rows.length > 0 && (
+                            <p className={styles.hint}>
+                                {rows.length} people, starting with {rows.slice(0, 3).map((row) => row.email).join(', ')}. Rows without a valid address are skipped and listed after.
+                            </p>
+                        )}
+                    </>
+                )}
+
+                <div className={styles.dialogActions}>
+                    <button type="button" className={styles.linkButton} onClick={onClose}>
+                        Cancel
+                    </button>
+                    <button type="button" className={styles.buttonPrimary} disabled={!ready} onClick={create}>
+                        {busy ? 'Building the list…' : 'Create list'}
+                    </button>
+                </div>
+            </div>
+        </StandardModal>
+    );
+};
+
+/** Search the host's groups (clients) and collect chips. */
+const GroupPicker = ({ routes, noun, value, onChange }) => {
+    const [search, setSearch] = useState('');
+    const [results, setResults] = useState([]);
+    const query = useDebouncedValue(search, 250);
+
+    useEffect(() => {
+        let live = true;
+
+        api(routes.groups, 'GET', { search: query }).then((result) => {
+            if (live) setResults(Array.isArray(result.data?.groups) ? result.data.groups : []);
+        });
+
+        return () => {
+            live = false;
+        };
+    }, [routes, query]);
+
+    const chosen = new Set(value.map((group) => group.id));
+
+    return (
+        <div className={styles.field}>
+            <span className={styles.fieldLabel}>{noun?.plural ? noun.plural[0].toUpperCase() + noun.plural.slice(1) : 'Groups'}</span>
+
+            {value.length > 0 && (
+                <div className={styles.chips}>
+                    {value.map((group) => (
+                        <button
+                            key={group.id}
+                            type="button"
+                            className={styles.chip}
+                            title={`Take ${group.label} off the list`}
+                            onClick={() => onChange(value.filter((entry) => entry.id !== group.id))}
+                        >
+                            {group.label} ×
+                        </button>
+                    ))}
+                </div>
+            )}
+
+            <input
+                className={styles.input}
+                value={search}
+                placeholder={`Search ${noun?.plural || 'groups'}…`}
+                onChange={(event) => setSearch(event.target.value)}
+            />
+
+            <div className={styles.results}>
+                {results
+                    .filter((group) => !chosen.has(group.id))
+                    .slice(0, 8)
+                    .map((group) => (
+                        <button
+                            key={group.id}
+                            type="button"
+                            className={styles.result}
+                            onClick={() => onChange([...value, group])}
+                        >
+                            + {group.label}
+                        </button>
+                    ))}
+            </div>
+        </div>
+    );
+};
+
+const ListDetail = ({ id, routes, canManage, onClose, onChanged }) => {
+    const [data, setData] = useState(null);
+    const [search, setSearch] = useState('');
+    const [busy, setBusy] = useState(false);
+    const query = useDebouncedValue(search, 250);
+
+    const load = async () => {
+        const result = await api(routes.list(id), 'GET', { search: query });
+
+        if (result.ok) setData(result.data);
+    };
+
+    useEffect(() => {
+        load();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id, query]);
+
+    const refresh = async () => {
+        setBusy(true);
+        const result = await api(routes.refreshList(id), 'POST', {});
+        setBusy(false);
+        result.ok ? toast.success(result.data?.message || 'Refreshed.') : toast.error(result.message);
+        onChanged();
+        load();
+    };
+
+    const remove = () =>
+        showConfirmDialog({
+            title: 'Delete this list?',
+            message: 'The list goes, here and in Resend. Campaigns already sent to it keep their reports.',
+            confirmLabel: 'Delete',
+            cancelLabel: 'Keep it',
+            onConfirm: async () => {
+                const result = await api(routes.list(id), 'DELETE');
+
+                if (result.ok) {
+                    onChanged();
+                    onClose();
+                } else {
+                    toast.error(result.message || 'It could not be deleted.');
+                }
+            },
+        });
+
+    const list = data?.list;
+
+    return (
+        <StandardModal isOpen onClose={onClose} title={list?.name || 'List'} size="large" showHeader variant="sheet">
+            <div className={styles.dialog}>
+                {!list ? (
+                    <p className={styles.state}>Loading…</p>
+                ) : (
+                    <>
+                        <div className={styles.toolbar}>
+                            <span className={styles.quiet}>
+                                {list.members} people · {list.unsubscribed} unsubscribed · <SyncState list={list} />
+                            </span>
+                            {canManage && (
+                                <span className={styles.toolbarRight}>
+                                    {list.kind === 'crm' && (
+                                        <button type="button" className={styles.button} disabled={busy} onClick={refresh} title="Re-read the list from your contacts">
+                                            <RefreshCw size={14} aria-hidden="true" />
+                                            Refresh
+                                        </button>
+                                    )}
+                                    <button type="button" className={`${styles.button} ${styles.dangerButton}`} onClick={remove} title="Delete this list">
+                                        <Trash2 size={14} aria-hidden="true" />
+                                        Delete
+                                    </button>
+                                </span>
+                            )}
+                        </div>
+
+                        {list.kind === 'crm' && Object.keys(data.list.group_labels || {}).length > 0 && (
+                            <p className={styles.hint}>From: {Object.values(data.list.group_labels).join(', ')}</p>
+                        )}
+
+                        <input
+                            className={styles.input}
+                            value={search}
+                            placeholder="Search by name, email or company…"
+                            onChange={(event) => setSearch(event.target.value)}
+                        />
+
+                        <table className={styles.table}>
+                            <thead>
+                                <tr>
+                                    <th>Email</th>
+                                    <th>Name</th>
+                                    <th>Company</th>
+                                    <th>State</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {(data.members || []).map((member) => (
+                                    <tr key={member.id}>
+                                        <td>{member.email}</td>
+                                        <td>{member.name || '-'}</td>
+                                        <td>{member.company || '-'}</td>
+                                        <td>
+                                            {member.unsubscribed_at ? (
+                                                <span className={styles.bad}>Unsubscribed</span>
+                                            ) : member.status === 'failed' ? (
+                                                <span className={styles.bad} title={member.error || ''}>Refused by Resend</span>
+                                            ) : member.status === 'pending' ? (
+                                                <span className={styles.warn}>Copying</span>
+                                            ) : (
+                                                <span className={styles.good}>Ready</span>
+                                            )}
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </>
+                )}
+            </div>
+        </StandardModal>
+    );
+};
+
+export default EmailLists;

package/src/components/emailCampaigns/emailCampaignApi.js

@@ -0,0 +1,135 @@
+/**
+ * The email campaign module's endpoints, and one way to call them.
+ *
+ * NOT CustomFetch, for two reasons that both matter here: it caches GETs, and
+ * the numbers on this screen (sync progress, open rates) are the thing that
+ * must not be two minutes old; and it hands a refusal back as one string, where
+ * a send refusal carries a LIST of blockers the screen prints in full.
+ */
+
+export const resolveEmailCampaignEndpoints = (base = '/ajax/email-campaigns') => {
+    const root = String(base).replace(/\/+$/, '');
+
+    return {
+        index: root,
+        groups: `${root}/groups`,
+        templates: `${root}/templates`,
+        template: (id) => `${root}/templates/${id}`,
+        images: `${root}/images`,
+        campaigns: `${root}/campaigns`,
+        campaign: (id) => `${root}/campaigns/${id}`,
+        preview: (id) => `${root}/campaigns/${id}/preview`,
+        test: (id) => `${root}/campaigns/${id}/test`,
+        send: (id) => `${root}/campaigns/${id}/send`,
+        cancel: (id) => `${root}/campaigns/${id}/cancel`,
+        duplicate: (id) => `${root}/campaigns/${id}/duplicate`,
+        lists: `${root}/lists`,
+        list: (id) => `${root}/lists/${id}`,
+        refreshList: (id) => `${root}/lists/${id}/refresh`,
+    };
+};
+
+const csrf = () =>
+    typeof document === 'undefined'
+        ? null
+        : document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+
+/**
+ * @returns {Promise<{ok: boolean, status: number, data: object, message: string}>}
+ *          never rejects: a network failure is `{ok: false, status: 0}`.
+ */
+export const api = async (url, method = 'GET', body = null) => {
+    const headers = { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' };
+    const token = csrf();
+
+    if (token) {
+        headers['X-CSRF-TOKEN'] = token;
+    }
+
+    const options = { method, headers, credentials: 'same-origin' };
+    let target = url;
+
+    if (body instanceof FormData) {
+        options.body = body;
+    } else if (method === 'GET' && body) {
+        const query = new URLSearchParams(
+            Object.entries(body).filter(([, value]) => value !== undefined && value !== null && value !== '')
+        ).toString();
+        target = query ? `${url}${url.includes('?') ? '&' : '?'}${query}` : url;
+    } else if (body !== null) {
+        headers['Content-Type'] = 'application/json';
+        options.body = JSON.stringify(body);
+    }
+
+    try {
+        const response = await fetch(target, options);
+        let data = {};
+
+        try {
+            data = await response.json();
+        } catch (error) {
+            data = {};
+        }
+
+        const firstError =
+            data?.errors && typeof data.errors === 'object'
+                ? Object.values(data.errors).flat()[0]
+                : null;
+
+        return {
+            ok: response.ok && data?.ok !== false,
+            status: response.status,
+            data,
+            message: String(data?.message || firstError || (response.ok ? '' : `Request failed (${response.status}).`)),
+        };
+    } catch (error) {
+        return { ok: false, status: 0, data: {}, message: 'The server could not be reached. Check the connection and try again.' };
+    }
+};
+
+/** "18 Sep 2026, 1:09pm", from an ISO string, in the viewer's own zone. */
+export const formatWhen = (iso) => {
+    if (!iso) return '';
+
+    const date = new Date(iso);
+
+    if (Number.isNaN(date.getTime())) return '';
+
+    return date.toLocaleString('en-AU', {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+    });
+};
+
+export const STATUS_LABELS = {
+    draft: { label: 'Draft', tone: 'quiet' },
+    scheduled: { label: 'Scheduled', tone: 'warn' },
+    sending: { label: 'Sending', tone: 'warn' },
+    sent: { label: 'Sent', tone: 'good' },
+    cancelled: { label: 'Cancelled', tone: 'quiet' },
+    failed: { label: 'Failed', tone: 'bad' },
+};
+
+export const BLOCK_TYPES = [
+    { type: 'heading', label: 'Heading' },
+    { type: 'text', label: 'Text' },
+    { type: 'image', label: 'Image' },
+    { type: 'button', label: 'Button' },
+    { type: 'columns', label: 'Two columns' },
+    { type: 'divider', label: 'Divider' },
+    { type: 'spacer', label: 'Space' },
+];
+
+export const newBlock = (type) =>
+    ({
+        heading: { type, level: 1, text: '', align: 'left' },
+        text: { type, html: '' },
+        image: { type, url: '', alt: '', href: '', width: 100, align: 'center' },
+        button: { type, label: 'Find out more', url: '', align: 'left' },
+        columns: { type, left: '', right: '' },
+        divider: { type },
+        spacer: { type, height: 24 },
+    })[type] || { type: 'text', html: '' };