@visns-studio/visns-components 6.34.0 → 6.35.0

package/src/components/emailCampaigns/CampaignEditor.jsx

@@ -0,0 +1,614 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { CalendarClock, Copy, Monitor, Save, Send, Smartphone, TestTube2, Trash2 } from 'lucide-react';
+import { toast } from 'react-toastify';
+
+import StandardModal from '../generic/StandardModal';
+import { showConfirmDialog } from '../generic/ConfirmationDialog';
+import styles from '../styles/EmailCampaigns.module.scss';
+import BlockEditor from './BlockEditor';
+import CampaignReport from './CampaignReport';
+import { api, formatWhen, STATUS_LABELS } from './emailCampaignApi';
+
+/**
+ * One campaign: its settings and blocks on the left, the email as it will
+ * arrive on the right, and the actions along the top.
+ *
+ * AUTOSAVE, no Save button: every change is posted 700ms after the typing
+ * stops, and the header says Saving / Saved. A campaign editor people close
+ * without saving is a campaign editor that loses work.
+ *
+ * THE PREVIEW IS THE SERVER'S RENDER of the unsaved blocks, with the merge tags
+ * filled from the person looking at it, in a sandboxed frame. The page draws no
+ * email of its own: two renderers would disagree about what was sent.
+ *
+ * A campaign that has been sent (or is sending) opens on its REPORT, with the
+ * email beneath it, and nothing is editable.
+ */
+const EDITABLE_FIELDS = ['name', 'subject', 'preview_text', 'from_name', 'from_email', 'reply_to', 'list_id', 'content'];
+
+const CampaignEditor = ({ id, routes, canManage, settings, lists, onBack, onChanged }) => {
+    const [campaign, setCampaign] = useState(null);
+    const [draft, setDraft] = useState(null);
+    const [failed, setFailed] = useState('');
+    const [saving, setSaving] = useState('idle');
+    const [previewHtml, setPreviewHtml] = useState('');
+    const [previewSubject, setPreviewSubject] = useState('');
+    const [device, setDevice] = useState('desktop');
+    const [busy, setBusy] = useState(false);
+    const [scheduling, setScheduling] = useState(false);
+    const [testing, setTesting] = useState(false);
+    const [notice, setNotice] = useState(null);
+
+    const dirty = useRef(false);
+
+    const load = useCallback(async () => {
+        const result = await api(routes.campaign(id));
+
+        if (!result.ok || !result.data?.campaign) {
+            setFailed(result.message || 'This campaign could not be loaded.');
+
+            return;
+        }
+
+        setCampaign(result.data.campaign);
+        setDraft(pick(result.data.campaign));
+        dirty.current = false;
+    }, [routes, id]);
+
+    useEffect(() => {
+        load();
+    }, [load]);
+
+    const editable = Boolean(campaign?.editable) && canManage;
+
+    // Autosave.
+    useEffect(() => {
+        if (!draft || !editable || !dirty.current) return undefined;
+
+        setSaving('pending');
+
+        const timer = setTimeout(async () => {
+            setSaving('saving');
+            const result = await api(routes.campaign(id), 'POST', draft);
+
+            if (result.ok && result.data?.campaign) {
+                setCampaign(result.data.campaign);
+                setSaving('saved');
+                onChanged?.();
+            } else {
+                setSaving('error');
+                setNotice({ tone: 'bad', text: result.message || 'The change could not be saved.' });
+            }
+        }, 700);
+
+        return () => clearTimeout(timer);
+    }, [draft, editable, routes, id, onChanged]);
+
+    // Preview of the unsaved state.
+    useEffect(() => {
+        if (!draft) return undefined;
+
+        const timer = setTimeout(async () => {
+            const result = await api(routes.preview(id), 'POST', {
+                content: draft.content,
+                subject: draft.subject,
+                preview_text: draft.preview_text,
+            });
+
+            if (result.ok && typeof result.data?.html === 'string') {
+                setPreviewHtml(result.data.html);
+                setPreviewSubject(result.data.subject ?? '');
+            }
+        }, 450);
+
+        return () => clearTimeout(timer);
+    }, [draft, routes, id]);
+
+    const change = (patch) => {
+        dirty.current = true;
+        setNotice(null);
+        setDraft((current) => ({ ...current, ...patch }));
+    };
+
+    const act = async (url, body, success) => {
+        setBusy(true);
+        setNotice(null);
+        const result = await api(url, 'POST', body);
+        setBusy(false);
+
+        if (result.data?.campaign) {
+            setCampaign(result.data.campaign);
+            setDraft(pick(result.data.campaign));
+            dirty.current = false;
+        }
+
+        if (result.ok) {
+            toast.success(result.message || success);
+            onChanged?.();
+
+            return true;
+        }
+
+        setNotice({
+            tone: 'bad',
+            text: result.message || 'That did not work.',
+            blockers: Array.isArray(result.data?.blockers) ? result.data.blockers : [],
+        });
+
+        return false;
+    };
+
+    const sendNow = () =>
+        showConfirmDialog({
+            title: 'Send this campaign now?',
+            message: `It goes to everybody on ${listName(lists, draft?.list_id) || 'the list'} who has not unsubscribed. This cannot be undone.`,
+            confirmLabel: 'Send now',
+            cancelLabel: 'Not yet',
+            onConfirm: () => act(routes.send(id), {}, 'Sending now.'),
+        });
+
+    const duplicate = async () => {
+        const result = await api(routes.duplicate(id), 'POST', {});
+
+        if (result.ok && result.data?.campaign) {
+            toast.success('Copied into a new draft.');
+            onChanged?.();
+            onBack?.(result.data.campaign.id);
+        } else {
+            toast.error(result.message || 'It could not be copied.');
+        }
+    };
+
+    const remove = () =>
+        showConfirmDialog({
+            title: 'Delete this draft?',
+            message: 'The campaign and its content go. Nothing was sent, so nobody will notice.',
+            confirmLabel: 'Delete',
+            cancelLabel: 'Keep it',
+            onConfirm: async () => {
+                const result = await api(routes.campaign(id), 'DELETE');
+
+                if (result.ok) {
+                    onChanged?.();
+                    onBack?.();
+                } else {
+                    toast.error(result.message || 'It could not be deleted.');
+                }
+            },
+        });
+
+    const saveTemplate = async () => {
+        const name = window.prompt('Name the template', draft?.name || 'Template');
+
+        if (!name) return;
+
+        const result = await api(routes.templates, 'POST', { name, content: draft.content });
+        result.ok ? toast.success('Saved as a template.') : toast.error(result.message || 'It could not be saved.');
+    };
+
+    if (failed) {
+        return <p className={styles.state}>{failed}</p>;
+    }
+
+    if (!campaign || !draft) {
+        return <p className={styles.state}>Loading the campaign…</p>;
+    }
+
+    const status = STATUS_LABELS[campaign.status] || { label: campaign.status, tone: 'quiet' };
+
+    return (
+        <div className={styles.editor}>
+            <div className={styles.editorHead}>
+                <div className={styles.editorTitle}>
+                    <span className={`${styles.pill} ${styles[`tone_${status.tone}`]}`}>{status.label}</span>
+                    {campaign.scheduled_at && campaign.status === 'scheduled' && (
+                        <span className={styles.quiet}>for {formatWhen(campaign.scheduled_at)}</span>
+                    )}
+                    {campaign.sent_at && <span className={styles.quiet}>sent {formatWhen(campaign.sent_at)}</span>}
+                    {editable && (
+                        <span className={styles.saveMark} aria-live="polite">
+                            {saving === 'saving' || saving === 'pending'
+                                ? 'Saving…'
+                                : saving === 'saved'
+                                  ? 'Saved'
+                                  : saving === 'error'
+                                    ? 'Not saved'
+                                    : ''}
+                        </span>
+                    )}
+                </div>
+
+                <div className={styles.editorActions}>
+                    {editable && (
+                        <>
+                            <button
+                                type="button"
+                                className={styles.button}
+                                disabled={busy}
+                                title="Send one copy to yourself, with your own details filled in"
+                                onClick={() => setTesting(true)}
+                            >
+                                <TestTube2 size={14} aria-hidden="true" />
+                                Send test
+                            </button>
+                            <button
+                                type="button"
+                                className={styles.button}
+                                disabled={busy}
+                                title="Choose a date and time for it to go out"
+                                onClick={() => setScheduling(true)}
+                            >
+                                <CalendarClock size={14} aria-hidden="true" />
+                                Schedule…
+                            </button>
+                            <button
+                                type="button"
+                                className={styles.buttonPrimary}
+                                disabled={busy}
+                                title="Send it to the list straight away"
+                                onClick={sendNow}
+                            >
+                                <Send size={14} aria-hidden="true" />
+                                Send now
+                            </button>
+                        </>
+                    )}
+                    {canManage && campaign.status === 'scheduled' && (
+                        <button
+                            type="button"
+                            className={styles.button}
+                            disabled={busy}
+                            title="Stop it going out. It becomes editable again"
+                            onClick={() => act(routes.cancel(id), {}, 'Cancelled.')}
+                        >
+                            Cancel schedule
+                        </button>
+                    )}
+                    {canManage && (
+                        <>
+                            <button
+                                type="button"
+                                className={styles.iconAction}
+                                title="Save this content as a template for future campaigns"
+                                aria-label="Save as template"
+                                onClick={saveTemplate}
+                            >
+                                <Save size={15} aria-hidden="true" />
+                            </button>
+                            <button
+                                type="button"
+                                className={styles.iconAction}
+                                title="Copy this campaign into a new draft"
+                                aria-label="Duplicate"
+                                onClick={duplicate}
+                            >
+                                <Copy size={15} aria-hidden="true" />
+                            </button>
+                        </>
+                    )}
+                    {editable && (
+                        <button
+                            type="button"
+                            className={`${styles.iconAction} ${styles.iconDanger}`}
+                            title="Delete this draft"
+                            aria-label="Delete"
+                            onClick={remove}
+                        >
+                            <Trash2 size={15} aria-hidden="true" />
+                        </button>
+                    )}
+                </div>
+            </div>
+
+            {notice && (
+                <div className={`${styles.notice} ${styles[`notice_${notice.tone}`]}`} role="alert">
+                    <p>{notice.text}</p>
+                    {notice.blockers?.length > 0 && (
+                        <ul>
+                            {notice.blockers.map((line) => (
+                                <li key={line}>{line}</li>
+                            ))}
+                        </ul>
+                    )}
+                </div>
+            )}
+
+            {campaign.error && campaign.status === 'failed' && (
+                <div className={`${styles.notice} ${styles.notice_bad}`}>
+                    <p>{campaign.error}</p>
+                </div>
+            )}
+
+            {campaign.report && <CampaignReport report={campaign.report} />}
+
+            <div className={styles.editorBody}>
+                <div className={styles.editorForm}>
+                    {/* A campaign that cannot change gets a short record of what
+                        went out, not a greyed-out copy of the whole editor. */}
+                    {!editable && (
+                        <section className={styles.card}>
+                            <h3 className={styles.cardTitle}>What went out</h3>
+                            <dl className={styles.details}>
+                                <dt>Subject</dt>
+                                <dd>{draft.subject || '-'}</dd>
+                                <dt>Preview text</dt>
+                                <dd>{draft.preview_text || '-'}</dd>
+                                <dt>From</dt>
+                                <dd>
+                                    {draft.from_name || settings?.from_name} &lt;{draft.from_email || settings?.from_email}&gt;
+                                </dd>
+                                <dt>Replies to</dt>
+                                <dd>{draft.reply_to || settings?.reply_to || 'The from address'}</dd>
+                                <dt>List</dt>
+                                <dd>{listName(lists, draft.list_id) || '-'}</dd>
+                            </dl>
+                        </section>
+                    )}
+
+                    {editable && (
+                    <section className={styles.card}>
+                        <h3 className={styles.cardTitle}>Settings</h3>
+
+                        <Field label="Campaign name" hint="For you; recipients never see it.">
+                            <input
+                                className={styles.input}
+                                value={draft.name || ''}
+                                disabled={!editable}
+                                maxLength={191}
+                                onChange={(event) => change({ name: event.target.value })}
+                            />
+                        </Field>
+
+                        <Field label="Send to">
+                            <select
+                                className={styles.select}
+                                value={draft.list_id || ''}
+                                disabled={!editable}
+                                onChange={(event) => change({ list_id: event.target.value ? Number(event.target.value) : null })}
+                            >
+                                <option value="">Choose a list…</option>
+                                {lists.map((list) => (
+                                    <option key={list.id} value={list.id}>
+                                        {list.name} ({list.members - list.unsubscribed} people)
+                                    </option>
+                                ))}
+                            </select>
+                        </Field>
+
+                        <Field label="Subject line" hint="Personal details work here too, e.g. {first_name}.">
+                            <input
+                                className={styles.input}
+                                value={draft.subject || ''}
+                                disabled={!editable}
+                                maxLength={255}
+                                onChange={(event) => change({ subject: event.target.value })}
+                            />
+                        </Field>
+
+                        <Field label="Preview text" hint="The line most inboxes show after the subject.">
+                            <input
+                                className={styles.input}
+                                value={draft.preview_text || ''}
+                                disabled={!editable}
+                                maxLength={255}
+                                onChange={(event) => change({ preview_text: event.target.value })}
+                            />
+                        </Field>
+
+                        <div className={styles.twoCol}>
+                            <Field label="From name">
+                                <input
+                                    className={styles.input}
+                                    value={draft.from_name || ''}
+                                    placeholder={settings?.from_name || ''}
+                                    disabled={!editable}
+                                    onChange={(event) => change({ from_name: event.target.value })}
+                                />
+                            </Field>
+                            <Field label="From address" hint="On a domain verified in Resend.">
+                                <input
+                                    type="email"
+                                    className={styles.input}
+                                    value={draft.from_email || ''}
+                                    placeholder={settings?.from_email || ''}
+                                    disabled={!editable}
+                                    onChange={(event) => change({ from_email: event.target.value })}
+                                />
+                            </Field>
+                        </div>
+
+                        <Field label="Replies go to" hint="Optional. Leave blank to use the from address.">
+                            <input
+                                type="email"
+                                className={styles.input}
+                                value={draft.reply_to || ''}
+                                placeholder={settings?.reply_to || ''}
+                                disabled={!editable}
+                                onChange={(event) => change({ reply_to: event.target.value })}
+                            />
+                        </Field>
+                    </section>
+
+                    )}
+
+                    {editable && (
+                    <section className={styles.card}>
+                        <h3 className={styles.cardTitle}>Content</h3>
+                        <BlockEditor
+                            blocks={Array.isArray(draft.content) ? draft.content : []}
+                            disabled={!editable}
+                            routes={routes}
+                            tags={settings?.merge_tags}
+                            onChange={(content) => change({ content })}
+                        />
+                    </section>
+                    )}
+
+                    {editable && campaign.blockers?.length > 0 && (
+                        <section className={styles.blockersCard}>
+                            <h3 className={styles.cardTitle}>Before it can be sent</h3>
+                            <ul>
+                                {campaign.blockers.map((line) => (
+                                    <li key={line}>{line}</li>
+                                ))}
+                            </ul>
+                        </section>
+                    )}
+                </div>
+
+                <div className={styles.previewPane}>
+                    <div className={styles.previewBar}>
+                        <span className={styles.quiet}>Preview, with your details filled in</span>
+                        <span className={styles.deviceToggle} role="group" aria-label="Preview size">
+                            <button
+                                type="button"
+                                className={device === 'desktop' ? styles.deviceOn : styles.device}
+                                aria-pressed={device === 'desktop'}
+                                title="Preview at desktop width"
+                                onClick={() => setDevice('desktop')}
+                            >
+                                <Monitor size={14} aria-hidden="true" />
+                            </button>
+                            <button
+                                type="button"
+                                className={device === 'phone' ? styles.deviceOn : styles.device}
+                                aria-pressed={device === 'phone'}
+                                title="Preview at phone width"
+                                onClick={() => setDevice('phone')}
+                            >
+                                <Smartphone size={14} aria-hidden="true" />
+                            </button>
+                        </span>
+                    </div>
+                    <div className={styles.inboxLine}>
+                        <strong>{draft.from_name || settings?.from_name || 'Sender'}</strong>
+                        <span>{previewSubject || draft.subject || 'No subject yet'}</span>
+                        <span className={styles.quiet}>{draft.preview_text}</span>
+                    </div>
+                    {/* No allow-scripts: the frame runs nothing. allow-same-origin
+                        is there so images on this origin load. */}
+                    <iframe
+                        title="Email preview"
+                        className={device === 'phone' ? styles.framePhone : styles.frame}
+                        sandbox="allow-same-origin"
+                        srcDoc={previewHtml}
+                    />
+                </div>
+            </div>
+
+            {scheduling && (
+                <ScheduleDialog
+                    busy={busy}
+                    onClose={() => setScheduling(false)}
+                    onSchedule={async (iso) => {
+                        if (await act(routes.send(id), { scheduled_at: iso }, 'Scheduled.')) {
+                            setScheduling(false);
+                        }
+                    }}
+                />
+            )}
+
+            {testing && (
+                <TestDialog
+                    busy={busy}
+                    onClose={() => setTesting(false)}
+                    onSend={async (to) => {
+                        setBusy(true);
+                        const result = await api(routes.test(id), 'POST', to ? { to } : {});
+                        setBusy(false);
+
+                        if (result.ok) {
+                            toast.success(result.message);
+                            setTesting(false);
+                        } else {
+                            toast.error(result.message || 'The test could not be sent.');
+                        }
+                    }}
+                />
+            )}
+        </div>
+    );
+};
+
+const ScheduleDialog = ({ onClose, onSchedule, busy }) => {
+    const soon = new Date(Date.now() + 60 * 60 * 1000);
+    soon.setMinutes(0, 0, 0);
+    const local = (date) => {
+        const pad = (n) => String(n).padStart(2, '0');
+
+        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+    };
+    const [value, setValue] = useState(local(soon));
+
+    return (
+        <StandardModal isOpen onClose={onClose} title="Schedule the campaign" size="small" showHeader>
+            <div className={styles.dialog}>
+                <p className={styles.quiet}>It goes out at this time, in your own timezone. You can cancel it until then.</p>
+                <input
+                    type="datetime-local"
+                    className={styles.input}
+                    value={value}
+                    min={local(new Date())}
+                    onChange={(event) => setValue(event.target.value)}
+                />
+                <div className={styles.dialogActions}>
+                    <button type="button" className={styles.linkButton} onClick={onClose}>
+                        Cancel
+                    </button>
+                    <button
+                        type="button"
+                        className={styles.buttonPrimary}
+                        disabled={busy || !value}
+                        onClick={() => onSchedule(new Date(value).toISOString())}
+                    >
+                        Schedule
+                    </button>
+                </div>
+            </div>
+        </StandardModal>
+    );
+};
+
+const TestDialog = ({ onClose, onSend, busy }) => {
+    const [to, setTo] = useState('');
+
+    return (
+        <StandardModal isOpen onClose={onClose} title="Send a test" size="small" showHeader>
+            <div className={styles.dialog}>
+                <p className={styles.quiet}>
+                    One copy, with your own name in place of each recipient's. Leave the address blank to send it to yourself.
+                </p>
+                <input
+                    type="email"
+                    className={styles.input}
+                    value={to}
+                    placeholder="Your own address"
+                    onChange={(event) => setTo(event.target.value)}
+                />
+                <div className={styles.dialogActions}>
+                    <button type="button" className={styles.linkButton} onClick={onClose}>
+                        Cancel
+                    </button>
+                    <button type="button" className={styles.buttonPrimary} disabled={busy} onClick={() => onSend(to.trim())}>
+                        {busy ? 'Sending…' : 'Send test'}
+                    </button>
+                </div>
+            </div>
+        </StandardModal>
+    );
+};
+
+const Field = ({ label, hint, children }) => (
+    <label className={styles.field}>
+        <span className={styles.fieldLabel}>{label}</span>
+        {children}
+        {hint && <span className={styles.hint}>{hint}</span>}
+    </label>
+);
+
+const pick = (campaign) =>
+    EDITABLE_FIELDS.reduce((out, key) => ({ ...out, [key]: campaign[key] ?? (key === 'content' ? [] : '') }), {});
+
+const listName = (lists, id) => lists.find((list) => list.id === id)?.name;
+
+export default CampaignEditor;