// ===== m8-newsletters.jsx ===== // M8 · Newsletters — replaces window.OrgNewsletters // FR1 newsletter authoring (email-native, blocks, preview, test-send, schedule) // FR2 audience targeting + saved segments + suppression preview // FR3 template library with versioning + immutable sent snapshots // FR4 personalization tokens with fallback handling // FR5 preview/test-send across representative recipients // FR6 consent/suppression/red-flag hard gate // FR14 collaborative drafts with autosave + ownership // FR15 send safety: caps, splitting, master switch // FR18 sender identity + reply-to behavior const { React, TopBar, Card, SectionHead, Btn, IconBtn, StatusChip, Avatar, Kpi, Progress, Field, Input, Textarea, Select, Checkbox, Toggle, Tabs, Empty, IconPlus, IconCheck, IconX, IconArrow, IconArrowL, IconDownload, IconUpload, IconMail, IconMsg, IconUsers, IconStar, IconClock, IconBell, IconEdit, IconMore, IconFilter, IconSearch, IconShield, IconChevron, IconChevronD, IconExternal, IconAward, VOLUNTEERS, } = window; const { useState: useN, useMemo: useNM, useRef: useNR, useEffect: useNE } = React; const m8n_over = { fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--fg-3)", fontWeight: 500 }; const m8n_meta = { fontSize: 11, color: "var(--fg-3)" }; // ============================================================ // SEEDS // ============================================================ const NEWSLETTERS = [ { id: "nl-statewide-may26", name: "Statewide volunteer newsletter · May 2026", cadence: "Monthly · 1st Tue", sender: "CPW Volunteer Program", replyTo: "volunteers@cpw.state.co.us", audience: "All active volunteers statewide", audienceCount: 4127, suppressed: 143, eligible: 3984, sent: 3984, delivered: 3962, opens: 1514, clicks: 184, bounces: 22, unsubs: 8, complaints: 0, status: "sent", sentAt: "May 5, 2026 · 9:00 am MT", ownedBy: "Priya Sandoval", snapshot: "v3 — locked at send", auditRef: "nl-send-2026-05-05-1a", }, { id: "nl-ne-region-may26", name: "Northeast regional digest · May 2026", cadence: "Monthly · 1st Fri", sender: "Priya Sandoval · NE Region", replyTo: "priya.s@cpw.state.co.us", audience: "NE region active volunteers", audienceCount: 968, suppressed: 28, eligible: 940, sent: 940, delivered: 936, opens: 412, clicks: 71, bounces: 4, unsubs: 1, complaints: 0, status: "sent", sentAt: "May 1, 2026 · 8:00 am MT", ownedBy: "Priya Sandoval", snapshot: "v6 — locked at send", auditRef: "nl-send-2026-05-01-9c", }, { id: "nl-camphost-preseason", name: "Camp host pre-season · onboarding sequence", cadence: "Triggered · April 1 each year", sender: "Aliyah Chen · Camping team", replyTo: "camp.host@cpw.state.co.us", audience: "Approved camp hosts · status = trainee or active", audienceCount: 84, suppressed: 2, eligible: 82, sent: 82, delivered: 82, opens: 76, clicks: 41, bounces: 0, unsubs: 0, complaints: 0, status: "sent", sentAt: "Apr 1, 2026 · 7:00 am MT", ownedBy: "Aliyah Chen", snapshot: "v2 — locked at send", auditRef: "nl-send-2026-04-01-3f", }, { id: "nl-hunter-ed-es", name: "Hunter ed instructors · español · Q2", cadence: "Quarterly", sender: "CPW Hunter Outreach", replyTo: "hunter.ed@cpw.state.co.us", audience: "Hunter ed instructors · language preference = Spanish", audienceCount: 38, suppressed: 1, eligible: 37, sent: 0, delivered: 0, opens: 0, clicks: 0, bounces: 0, unsubs: 0, complaints: 0, status: "scheduled", sentAt: "Scheduled · Jun 3, 2026 · 8:00 am MT", ownedBy: "Marcus Chen", snapshot: "v1 · locks on send", }, { id: "nl-statewide-jun26", name: "Statewide volunteer newsletter · June 2026", cadence: "Monthly · 1st Tue", sender: "CPW Volunteer Program", replyTo: "volunteers@cpw.state.co.us", audience: "All active volunteers statewide", audienceCount: 4127, suppressed: 0, eligible: 0, sent: 0, delivered: 0, opens: 0, clicks: 0, bounces: 0, unsubs: 0, complaints: 0, status: "draft", sentAt: "—", ownedBy: "Priya Sandoval · co-edited by Marcus Chen", snapshot: "Draft v4 · autosaved 2 min ago", }, { id: "nl-inactive-relapse", name: "Re-engagement · lapsed >12 months", cadence: "Quarterly campaign", sender: "CPW Volunteer Program", replyTo: "volunteers@cpw.state.co.us", audience: "Inactive volunteers · last hour >12 mo · not deceased · not red-flagged", audienceCount: 642, suppressed: 142, eligible: 500, sent: 0, delivered: 0, opens: 0, clicks: 0, bounces: 0, unsubs: 0, complaints: 0, status: "draft", sentAt: "—", ownedBy: "Priya Sandoval", snapshot: "Draft v1 · last edited yesterday", }, ]; const TEMPLATES = [ { id: "tpl-statewide", name: "Statewide monthly · CPW master", v: "v8", updated: "Apr 22, 2026", uses: 7 }, { id: "tpl-regional", name: "Regional digest · 3-column", v: "v3", updated: "Mar 10, 2026", uses: 18 }, { id: "tpl-camphost", name: "Camp host onboarding", v: "v2", updated: "Mar 28, 2026", uses: 4 }, { id: "tpl-help-needed", name: "Help Needed · simple CTA", v: "v5", updated: "May 3, 2026", uses: 22 }, { id: "tpl-reengage", name: "Re-engagement (warm)", v: "v1", updated: "May 12, 2026", uses: 0 }, { id: "tpl-spanish", name: "Statewide · español", v: "v2", updated: "Apr 4, 2026", uses: 3 }, ]; // ============================================================ // ROOT // ============================================================ const OrgNewsletters = ({ go }) => { const [view, setView] = useN("list"); // list | detail | compose const [activeId, setActiveId] = useN(null); const [composeFrom, setComposeFrom] = useN(null); const active = NEWSLETTERS.find(n => n.id === activeId); if (view === "compose") { return n.id === composeFrom) || null} onClose={() => { setView("list"); setComposeFrom(null); }} />; } if (view === "detail" && active) { return { setView("list"); setActiveId(null); }} onEdit={() => { setComposeFrom(active.id); setView("compose"); }} />; } return { setActiveId(id); setView("detail"); }} onNew={() => { setComposeFrom(null); setView("compose"); }} />; }; // ============================================================ // LIST + OVERVIEW // ============================================================ const NewsletterList = ({ onOpen, onNew }) => { const [tab, setTab] = useN("all"); return ( <> New newsletter} secondary={Templates} />
n.status === "draft").length }, { id: "scheduled", label: "Scheduled", count: NEWSLETTERS.filter(n => n.status === "scheduled").length }, { id: "sent", label: "Sent", count: NEWSLETTERS.filter(n => n.status === "sent").length }, { id: "templates", label: "Templates", count: TEMPLATES.length }, ]} /> {tab === "templates" ? : (
NewsletterAudienceSent / scheduledOpenClickState
{NEWSLETTERS.filter(n => tab === "all" ? true : n.status === tab).map((n, i, arr) => (
onOpen(n.id)} style={{ display: "grid", gridTemplateColumns: "minmax(240px, 2fr) 130px 120px 120px 110px 110px 36px", gap: 14, padding: "16px 18px", alignItems: "center", borderBottom: i === arr.length - 1 ? "none" : "1px solid var(--border-soft)", cursor: "pointer", }}>
{n.name}
{n.cadence} · owner {n.ownedBy.split(" · ")[0]}
{n.audienceCount.toLocaleString()}
{n.suppressed > 0 &&
{n.suppressed} suppressed
}
{n.sentAt}
{n.status === "sent" ? `${Math.round((n.opens / n.delivered) * 100)}%` : "—"} {n.status === "sent" &&
{n.opens.toLocaleString()} opens
}
{n.status === "sent" ? `${((n.clicks / n.delivered) * 100).toFixed(1)}%` : "—"} {n.status === "sent" &&
{n.clicks} clicks
}
))} )}
); }; const TemplatesGrid = () => (
{TEMPLATES.map(t => (
{t.name} {t.v}
Used {t.uses} times · updated {t.updated}
Preview Start from this
))}
); // ============================================================ // DETAIL (post-send view) // ============================================================ const NewsletterDetail = ({ n, onBack, onEdit }) => { const [tab, setTab] = useN("results"); const isSent = n.status === "sent"; return ( <> Duplicate : Edit draft} secondary={Export results} />
{isSent && (
0 ? "down" : "neutral"} icon={IconX} />
)} {tab === "results" && (isSent ? : )} {tab === "content" && } {tab === "audience" && } {tab === "delivery" && } {tab === "settings" && }
); }; const NlResults = ({ n }) => ( <>
Engagement over 7 days
{[18, 32, 28, 14, 8, 5, 3].map((h, i) => (
{["D0", "D1", "D2", "D3", "D4", "D5", "D6"][i]}
))}
Top clicks
{[ { url: "https://volunteer.cpw.state.co.us/opportunities", clicks: 84, label: "'See what's needed' (primary CTA)" }, { url: "https://volunteer.cpw.state.co.us/account/hours/add", clicks: 42, label: "'Add hours' link" }, { url: "https://cpw.state.co.us/learn/Pages/Hunter-Education.aspx", clicks: 28, label: "Hunter ed feature link" }, { url: "https://volunteer.cpw.state.co.us/account/profile", clicks: 18, label: "'Update profile' footer link" }, { url: "mailto:volunteers@cpw.state.co.us", clicks: 12, label: "Footer email" }, ].map((c, i) => (
{c.label}
{c.url}
{c.clicks}
))}
Funnel
{[ { l: "Eligible", v: n.eligible, pct: 100 }, { l: "Sent", v: n.sent, pct: (n.sent / n.eligible) * 100 }, { l: "Delivered", v: n.delivered, pct: (n.delivered / n.eligible) * 100 }, { l: "Opened", v: n.opens, pct: (n.opens / n.eligible) * 100 }, { l: "Clicked", v: n.clicks, pct: (n.clicks / n.eligible) * 100 }, ].map((s, i) => (
{s.l} {s.v.toLocaleString()}
))}
Suppression breakdown
{[ { l: "Communication opt-out", v: 62 }, { l: "Hard-bounced previously", v: 38 }, { l: "Red/yellow flag", v: 22 }, { l: "Deceased / inactive", v: 14 }, { l: "Channel consent revoked", v: 7 }, ].map(s => (
· {s.l}{s.v}
))}
VolunteerSiteSentDeliveredOpenedClickedState
{VOLUNTEERS.slice(0, 6).map((v, i, arr) => { const opened = i % 3 !== 2; const clicked = i < 2; return (
{v.name}
{v.site} 9:00:0{i + 2} 9:00:0{i + 3} {opened ? `9:1${i + 3}` : "—"} {clicked ? `9:1${i + 4}` : "—"}
); })} ); const NlPlan = ({ n }) => (
Send plan
{n.eligible.toLocaleString()} {n.suppressed.toLocaleString()}

This newsletter is {n.status}. {n.status === "scheduled" ? "It will send at the scheduled time. Permissions and suppressions are re-evaluated at send." : "Resume the composer to edit, preview, and schedule."}

 ); // ============================================================ // CONTENT SNAPSHOT — actual rendered newsletter // ============================================================ const NlContentSnapshot = ({ n }) => ( <>
What was sent · {n.snapshot}
View HTML View plain text Download .eml
cpw.state.co.us · seen by recipient HTML · 240 KB
Token resolution · sample recipient
{VOLUNTEERS[0].name}
Boyd Lake SP · NE region
{[ { t: "{{first_name}}", v: "Sasha" }, { t: "{{anniversary}}", v: "Mar 14 (8 years)" }, { t: "{{ytd_hours}}", v: "42" }, { t: "{{rolling_12_hours}}", v: "118" }, { t: "{{lifetime_hours}}", v: "1,284" }, { t: "{{help_needed_14d}}", v: "3 nearby opportunities" }, { t: "{{profile_url}}", v: "vol.cpw.../v-arenas" }, { t: "{{sender_signature}}", v: "Priya Sandoval, NE Region" }, ].map(t => (
{t.t} {t.v}
))}
All tokens resolved. No fallbacks used. Send-time gate passed.
); const RenderedNewsletter = ({ n }) => (
{/* email header */}
Colorado Parks & Wildlife
Volunteer newsletter · May 2026
{/* hero photo placeholder */}
Spring trail crews · 1,284 hours so far
Thank you for showing up — even when it was raining.
{/* body */}

Sasha,

You've put in 42 hours this calendar year and 118 over the last twelve months — thank you. We've got a few things to share from the field this month.

Coming up near you

Cherry Creek shoreline cleanup · Sat, Jun 14 · 9–11:30 am
South swim beach · meet at the volunteer tent. Coffee provided.
Boyd Lake trail crew · Sun, Jun 22 · 8 am – 1 pm
Tools provided. Bring water and gloves.
See what's needed

Milestones this month

Three of our long-tenured volunteers crossed the 500-hour mark this spring. We'll celebrate them at the regional gathering on Jun 28.

Sent by {n.sender} · reply to {n.replyTo}
You're receiving this because you're an active CPW volunteer. Manage preferences · Unsubscribe
Colorado Parks & Wildlife · 6060 Broadway, Denver CO 80216
); // ============================================================ // AUDIENCE TAB (post-send) // ============================================================ const NlAudience = ({ n }) => ( <>
Targeting rules · locked at send
Audience rules and snapshot are immutable for this send. Recipients are not recomputed retroactively if the segment changes.
Audience funnel
Suppression categories are visible to authorized staff. Per-recipient reasons appear in the audience CSV export.
Recipients CSV
); const RuleRow = ({ op, text, tone }) => (
{op} {text}
); const CountRow = ({ label, n, sub, bold }) => (
{label} {sub ? "−" : ""}{n.toLocaleString()}
); // ============================================================ // DELIVERY & AUDIT TAB // ============================================================ const NlDelivery = ({ n }) => ( <>
Send job · {n.auditRef || "pending"}
{[ ["Sender", `${n.sender}`], ["Reply-to", n.replyTo], ["Subject", "Spring trail crews · 1,284 hours so far · what's coming up"], ["Preheader", "A field roundup, milestones, and what's near you."], ["From IP / pool", "outbound-1.cpw.state.co.us (warm pool)"], ["DKIM / SPF / DMARC", "pass · pass · pass"], ["Send mode", "Broadcast · split into 9 chunks of 450 BCC max"], ["Throttle", "120 emails / sec (provider cap 200)"], ["Master switch", "ON · sandbox masked recipients: 0"], ["Authored by", n.ownedBy], ["Locked snapshot", n.snapshot], ].map(([k, v]) => ( ))}
{k}{v}
Audit timeline
{[ { who: "Priya Sandoval", what: "Created draft", t: "Apr 28 · 10:14 am" }, { who: "Marcus Chen", what: "Co-edited · 6 edits", t: "Apr 29 · 2:02 pm" }, { who: "Priya Sandoval", what: "Test-sent to self", t: "Apr 30 · 4:48 pm" }, { who: "Priya Sandoval", what: "Test-sent to NE coordinators (3 people)", t: "May 1 · 9:12 am" }, { who: "Priya Sandoval", what: "Scheduled send · May 5 9:00 am MT", t: "May 1 · 9:30 am" }, { who: "Aliyah Chen", what: "Approved (tenant policy)", t: "May 1 · 11:14 am" }, { who: "System", what: "Re-checked permissions + suppression at send", t: "May 5 · 8:59 am" }, { who: "System", what: "Dispatched in 9 chunks · 3,984 delivered", t: "May 5 · 9:00–9:02 am" }, { who: "System", what: "Locked snapshot — content immutable", t: "May 5 · 9:00 am" }, ].map((e, i, arr) => (
{e.who} {e.t}
{e.what}
))}
); const NlSettings = ({ n }) => (
Priya Sandoval (owner) Marcus Chen (editor) Add
); // ============================================================ // COMPOSER — 6-step flow // ============================================================ const NewsletterComposer = ({ base, onClose }) => { const [step, setStep] = useN(1); const [autosaved, setAutosaved] = useN("just now"); const steps = ["Audience", "Content", "Personalization", "Pre-flight", "Schedule", "Sending"]; useNE(() => { const i = setInterval(() => setAutosaved(["just now", "1 min ago", "2 min ago"][Math.floor(Math.random() * 3)]), 12000); return () => clearInterval(i); }, []); return ( <> Save draft & close} secondary={Send test} />
{step === 1 && } {step === 2 && } {step === 3 && } {step === 4 && } {step === 5 && } {step === 6 && }
{step > 1 && step < 6 && setStep(step - 1)}>Back}
{step < 5 && setStep(step + 1)}>Continue} {step === 5 && setStep(6)}>Schedule & dispatch} {step === 6 && Done}
); }; const ComposerSteps = ({ step, setStep, steps }) => (
{steps.map((label, i) => { const n = i + 1; const done = n < step; const active = n === step; return ( ); })}
); // --- Step 1: Audience --- const Step1Audience = () => (
Target audience
Refine with rules
Add rule
Always applied
{[ "Red / yellow flag", "Deceased / inactive", "Email channel consent revoked", "Hard-bounced previously", "Unsubscribed from newsletters", ].map(r => (
Excluded · {r}
))}
Audience preview · live
968 final eligible recipients
Recipient mix
Ongoing 412 Episodic 354 Camp hosts 134 Hunter ed 68
Preview recipient list
); // --- Step 2: Content --- const Step2Content = () => { const [blocks] = useN([ { t: "hero", label: "Hero · spring trail crews" }, { t: "text", label: "Personal greeting + hours summary" }, { t: "cards", label: "Upcoming opportunities · 2 cards" }, { t: "cta", label: "CTA · See what's needed" }, { t: "text", label: "Milestones this month" }, { t: "footer", label: "Footer · preferences + unsubscribe" }, ]); return (
Add block
{[ { id: "hero", label: "Hero with image" }, { id: "text", label: "Text block" }, { id: "cards", label: "Card row" }, { id: "cta", label: "Button CTA" }, { id: "data", label: "Hours / progress block" }, { id: "quote", label: "Pull quote" }, { id: "footer", label: "Footer" }, { id: "video", label: "Video (poster + link)" }, ].map(b => (
{b.label}
))}
Brand
{["var(--ink)", "var(--sage-700)", "var(--coral-600)", "var(--iris-500)"].map(c => (
))}
Plain text Accessibility
Blocks (drag to reorder)
{blocks.map((b, i) => (
⋮⋮ {b.label}
))}
Accessibility
); }; const CheckRow = ({ ok, t }) => (
{ok === "ok" ? "✓" : "!"} {t}
); // --- Step 3: Personalization preview --- const Step3Personalization = () => { const [recipient, setRecipient] = useN(VOLUNTEERS[0].id); const v = VOLUNTEERS.find(x => x.id === recipient) || VOLUNTEERS[0]; return (
Preview as recipient
If anything changes before send
{}} label="Recompute suppression list at send time" /> {}} label="Re-evaluate red-flag / inactive / deceased state" /> {}} label="Re-evaluate channel consent" /> {}} label="Verify sender identity is still authorized" />
Send plan summary
Recipients are scoped to your permitted regions. Once dispatched, the content snapshot is immutable.
); // --- Step 6: Result --- const Step6Result = ({ onClose }) => (
Scheduled · Jun 2, 9:00 am MT
968 recipients · 56 suppressed · audit ref nl-send-2026-06-02-7x
Cancel up to 5 minutes before send. Recipients are re-checked at run time — if a volunteer becomes red-flagged or revokes consent between now and Jun 2, they're automatically excluded.
); const ResultStep = ({ n, t, d }) => (
{n} {t}
{d}
 ); // ============================================================ Object.assign(window, { OrgNewsletters });