@startsimpli/integrations 0.2.35 → 0.2.37

package/src/comms/__tests__/customer-emails-page.test.tsx

@@ -0,0 +1,678 @@
+/**
+ * The Customer emails composer (lane startsim-r7hws), end to end against a
+ * mocked Django (msw) through the REAL createCommsApi client, so each test is a
+ * full round-trip: click, request on the wire, response rendered.
+ *
+ * Screens: persona A, A1-A8 (startsim-lzfsd). Contract: ADR startsim-bzcrj §2.
+ *
+ * THE ACCESSIBLE CONTRACT GREEN MUST MEET (also in the DESIGN bead):
+ *   - one heading "Customer emails"; two role="switch" controls directly under it
+ *   - every other section is a fold: a button (aria-expanded) whose content is a
+ *     role="region" with the same name, collapsed by default
+ *   - native <select>s for cadence / audience / send-log filters
+ *   - previews in a sandboxed <iframe title="Email preview" srcdoc=...>
+ *
+ * Every "it never does X" test first proves the page rendered, so an empty
+ * component cannot pass it by doing nothing.
+ *
+ * GREEN (startsim-lno6v) aligned the mock with the SHIPPED backend:
+ *   - PATCH replaces `config` / `voice` whole (it does not merge them).
+ *   - steps/{i}/generate/ is 202 + a status, polled with GET until done/failed.
+ *   - send-now is 202 with a placeholder draft (generating:true), polled with
+ *     GET drafts/{id}/; or 200 nothing_customer_facing / draft_pending.
+ *   - enabled:false answers with `cancelled`; drafts/{id}/preview/ exists (G2).
+ */
+import * as React from 'react';
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it } from 'vitest';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { http, HttpResponse } from 'msw';
+import { setupServer } from 'msw/node';
+
+import { CustomerEmailsPage } from '../components/pages/CustomerEmailsPage';
+import { createCommsApi, setApiBase } from '../api/index';
+import type { CommsProgram, CommsSettings, Draft, SendRow } from '../types/index';
+import { BASE, P, SLUG, comeback, draft, metrics, productUpdate, sendRows, settings } from './fixtures';
+
+// ---- an in-memory comms backend --------------------------------------------
+
+interface Hit {
+  method: string;
+  path: string;
+  search: URLSearchParams;
+  body: any;
+}
+
+let hits: Hit[] = [];
+let db: {
+  settings: CommsSettings;
+  programs: CommsProgram[];
+  drafts: Draft[];
+  sends: SendRow[];
+  settingsStatus: number;
+  programPatchStatus: number;
+  testSend: { sent: boolean; reason?: string };
+  sendNow: { draft: Draft | null; reason?: string | null };
+  sendNowStatus: number;
+  /** What a send-now draft becomes once the worker finishes writing it. */
+  sendNowResult: Partial<Draft>;
+  generation: 'done' | 'failed';
+  cancelled: number;
+};
+
+const rel = (p: string) => p.replace(new URL(P).pathname, '');
+
+const server = setupServer(
+  http.all(`${P}/*`, async ({ request }) => {
+    const url = new URL(request.url);
+    const text = request.method === 'GET' ? '' : await request.text();
+    const hit: Hit = { method: request.method, path: rel(url.pathname), search: url.searchParams, body: text ? JSON.parse(text) : undefined };
+    hits.push(hit);
+    const { method, path, body } = hit;
+    let m: RegExpMatchArray | null;
+
+    if (path === '/settings/') {
+      if (db.settingsStatus !== 200) {
+        return HttpResponse.json({ detail: 'You do not have permission to perform this action.' }, { status: db.settingsStatus });
+      }
+      // JSON fields are replaced whole, as DRF does.
+      if (method === 'PATCH') db.settings = { ...db.settings, ...body };
+      return HttpResponse.json(db.settings);
+    }
+    if (path === '/settings/domain/' && method === 'POST') {
+      db.settings = {
+        ...db.settings,
+        sending_domain: body.domain,
+        domain_status: 'pending',
+        domain_records: [
+          { type: 'TXT', host: body.domain, value: 'v=spf1 include:spf.mailjet.com ~all', ok: false },
+          { type: 'TXT', host: `mailjet._domainkey.${body.domain}`, value: 'k=rsa; p=MIGf', ok: false },
+          { type: 'TXT', host: `_dmarc.${body.domain}`, value: 'v=DMARC1; p=none', ok: false },
+        ],
+      };
+      return HttpResponse.json(db.settings);
+    }
+    if (path === '/settings/domain/check/' && method === 'POST') {
+      db.settings = { ...db.settings, domain_status: 'verified', domain_records: db.settings.domain_records.map((r) => ({ ...r, ok: true })) };
+      return HttpResponse.json(db.settings);
+    }
+    if (path === '/programs/' && method === 'GET') {
+      if (db.settingsStatus !== 200) return HttpResponse.json({ detail: 'forbidden' }, { status: db.settingsStatus });
+      return HttpResponse.json(db.programs);
+    }
+    if ((m = path.match(/^\/programs\/([\w-]+)\/$/)) && method === 'PATCH') {
+      if (db.programPatchStatus !== 200) return HttpResponse.json({ detail: 'Engine unavailable' }, { status: db.programPatchStatus });
+      const i = db.programs.findIndex((p) => p.key === m![1]);
+      const cur = db.programs[i];
+      // config is replaced whole, as the shipped view does.
+      db.programs[i] = { ...cur, ...body, config: body.config ?? cur.config, version: cur.version + 1 } as CommsProgram;
+      const turnedOff = cur.enabled && body.enabled === false;
+      return HttpResponse.json(turnedOff ? { ...db.programs[i], cancelled: db.cancelled } : db.programs[i]);
+    }
+    if ((m = path.match(/^\/programs\/([\w-]+)\/steps\/(\d+)\/preview\/$/))) {
+      return HttpResponse.json({ subject: `Preview subject ${m[2]}`, preheader: 'Preview preheader', html: `<p>Hi Quinn, step ${m[2]}</p>`, text: 'Hi Quinn' });
+    }
+    if ((m = path.match(/^\/programs\/([\w-]+)\/steps\/(\d+)\/generate\/$/))) {
+      const p = db.programs.find((x) => x.key === m![1]) as ReturnType<typeof comeback>;
+      const index = Number(m[2]);
+      const step = p.config.steps[index];
+      if (method === 'POST') {
+        return HttpResponse.json({ step_index: index, status: 'pending', error: '', requested_at: 'now', finished_at: null, step }, { status: 202 });
+      }
+      // The poll: the worker has finished.
+      if (db.generation === 'failed') {
+        return HttpResponse.json({ step_index: index, status: 'failed', error: 'The model did not answer in time', requested_at: 'now', finished_at: 'now', step });
+      }
+      step.content = { subject: 'Last call: your patterns', preheader: '', html: '<p>Last call</p>', text: 'Last call' };
+      step.content_status = 'draft';
+      return HttpResponse.json({ step_index: index, status: 'done', error: '', requested_at: 'now', finished_at: 'now', step });
+    }
+    if ((m = path.match(/^\/programs\/([\w-]+)\/steps\/(\d+)\/approve\/$/)) && method === 'POST') {
+      const p = db.programs.find((x) => x.key === m![1]) as ReturnType<typeof comeback>;
+      p.config.steps[Number(m[2])].content_status = 'approved';
+      return HttpResponse.json(p);
+    }
+    if (path === '/test-send/' && method === 'POST') return HttpResponse.json(db.testSend);
+    if (path === '/programs/product_update/send-now/' && method === 'POST') {
+      if (db.sendNow.draft && db.sendNowStatus === 202) db.drafts.push({ ...db.sendNow.draft });
+      return HttpResponse.json(db.sendNow, { status: db.sendNowStatus });
+    }
+    if ((m = path.match(/^\/drafts\/([\w-]+)\/preview\/$/)) && method === 'GET') {
+      const d = db.drafts.find((x) => x.id === m![1])!;
+      return HttpResponse.json({ subject: `Rendered: ${d.subject}`, preheader: d.preheader, html: `<p>Hi Quinn, ${d.subject}</p>`, text: d.text });
+    }
+    if ((m = path.match(/^\/drafts\/([\w-]+)\/$/)) && method === 'GET') {
+      const d = db.drafts.find((x) => x.id === m![1])!;
+      // The poll: the worker has finished writing it.
+      if (d.generating) Object.assign(d, { generating: false }, db.sendNowResult);
+      return HttpResponse.json(d);
+    }
+    if (path === '/drafts/' && method === 'GET') {
+      const status = hit.search.get('status');
+      const rows = db.drafts.filter((d) => !status || d.approval === status);
+      return HttpResponse.json({ count: rows.length, next: null, previous: null, results: rows });
+    }
+    if ((m = path.match(/^\/drafts\/([\w-]+)\/(approve|discard)\/$/)) && method === 'POST') {
+      const d = db.drafts.find((x) => x.id === m![1])!;
+      d.approval = m[2] === 'approve' ? 'approved' : 'discarded';
+      return HttpResponse.json(d);
+    }
+    if ((m = path.match(/^\/drafts\/([\w-]+)\/$/)) && method === 'PATCH') {
+      const d = db.drafts.find((x) => x.id === m![1])!;
+      Object.assign(d, body);
+      return HttpResponse.json(d);
+    }
+    if (path === '/sends/' && method === 'GET') {
+      const page = Number(hit.search.get('page') ?? '1');
+      const size = Number(hit.search.get('page_size') ?? '25');
+      const program = hit.search.get('program');
+      const rows = db.sends.filter((r) => !program || r.program_key === program);
+      return HttpResponse.json({
+        count: rows.length,
+        next: page * size < rows.length ? `${P}/sends/?page=${page + 1}` : null,
+        previous: page > 1 ? `${P}/sends/?page=${page - 1}` : null,
+        results: rows.slice((page - 1) * size, page * size),
+      });
+    }
+    if (path === '/metrics/' && method === 'GET') return HttpResponse.json(metrics());
+    return HttpResponse.json({ detail: `unhandled ${method} ${path}` }, { status: 599 });
+  }),
+);
+
+beforeAll(() => {
+  server.listen({ onUnhandledRequest: 'error' });
+  setApiBase(`${BASE}/api/v1`);
+});
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+beforeEach(() => {
+  hits = [];
+  db = {
+    settings: settings(),
+    programs: [comeback(), productUpdate()],
+    drafts: [draft()],
+    // 120 rows on the server: more than one page, so slicing locally cannot pass.
+    sends: sendRows(120),
+    settingsStatus: 200,
+    programPatchStatus: 200,
+    testSend: { sent: true },
+    sendNow: { draft: draft({ id: 'd-2', subject: '', html: '', text: '', preheader: '', generating: true }), reason: null },
+    sendNowStatus: 202,
+    sendNowResult: { subject: 'What is new this week', html: '<p>New</p>', text: 'New' },
+    generation: 'done',
+    cancelled: 0,
+  };
+});
+
+function renderPage() {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false } } });
+  return render(
+    <QueryClientProvider client={qc}>
+      <CustomerEmailsPage api={createCommsApi(SLUG)} foundrySlug={SLUG} pollIntervalMs={10} />
+    </QueryClientProvider>,
+  );
+}
+
+const writes = () => hits.filter((h) => h.method !== 'GET');
+const comebackSwitch = () => screen.findByRole('switch', { name: /^comeback sequence$/i });
+const updatesSwitch = () => screen.findByRole('switch', { name: /^product update emails$/i });
+
+async function openFold(name: RegExp) {
+  const trigger = await screen.findByRole('button', { name });
+  expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  await userEvent.click(trigger);
+  expect(trigger).toHaveAttribute('aria-expanded', 'true');
+  return screen.findByRole('region', { name });
+}
+
+// ---- A1: one page, one title, two switches ----------------------------------
+
+describe('overview (A1)', () => {
+  it('renders ONE title and the two switches with their server state', async () => {
+    renderPage();
+    expect(await comebackSwitch()).toHaveAttribute('aria-checked', 'true');
+    expect(await updatesSwitch()).toHaveAttribute('aria-checked', 'false');
+    expect(screen.getAllByRole('heading', { name: /customer emails/i })).toHaveLength(1);
+  });
+
+  it('every other section is folded, collapsed by default', async () => {
+    renderPage();
+    await comebackSwitch();
+    for (const name of [
+      /^comeback sequence settings$/i, /^product updates$/i, /^approval$/i,
+      /^voice$/i, /^sending domain$/i, /^results$/i, /^send log$/i,
+    ]) {
+      expect(screen.getByRole('button', { name })).toHaveAttribute('aria-expanded', 'false');
+    }
+  });
+
+  it('makes no write and fetches no preview until the admin clicks something', async () => {
+    renderPage();
+    await comebackSwitch();
+    await new Promise((r) => setTimeout(r, 50));
+    expect(writes()).toEqual([]);
+    expect(hits.some((h) => h.path.includes('/preview/'))).toBe(false);
+  });
+});
+
+// ---- A8: switching off -------------------------------------------------------
+
+describe('switches (A1, A8)', () => {
+  it('turning Comeback off PATCHes enabled:false and says nothing further goes out', async () => {
+    renderPage();
+    await userEvent.click(await comebackSwitch());
+    await waitFor(() => expect(writes()).toHaveLength(1));
+    expect(writes()[0]).toMatchObject({ method: 'PATCH', path: '/programs/comeback/', body: { enabled: false } });
+    expect(await comebackSwitch()).toHaveAttribute('aria-checked', 'false');
+    expect(await screen.findByText(/nothing further will be sent/i)).toBeInTheDocument();
+  });
+
+  it('says how many pending emails the server cancelled', async () => {
+    db.cancelled = 12;
+    renderPage();
+    await userEvent.click(await comebackSwitch());
+    expect(await screen.findByText(/12 pending emails were cancelled/i)).toBeInTheDocument();
+  });
+
+  it('turning Product update emails on PATCHes enabled:true', async () => {
+    renderPage();
+    await userEvent.click(await updatesSwitch());
+    await waitFor(() => expect(writes()[0]).toMatchObject({ method: 'PATCH', path: '/programs/product_update/', body: { enabled: true } }));
+    await waitFor(async () => expect(await updatesSwitch()).toHaveAttribute('aria-checked', 'true'));
+  });
+
+  it('a refused toggle shows the server reason and the switch stays as it was', async () => {
+    db.programPatchStatus = 503;
+    renderPage();
+    await userEvent.click(await comebackSwitch());
+    expect((await screen.findByRole('alert')).textContent).toMatch(/engine unavailable/i);
+    expect(await comebackSwitch()).toHaveAttribute('aria-checked', 'true');
+  });
+});
+
+// ---- A2: comeback sequence ---------------------------------------------------
+
+describe('comeback sequence settings (A2)', () => {
+  it('shows the threshold and saves a new one, keeping the steps', async () => {
+    renderPage();
+    const fold = await openFold(/^comeback sequence settings$/i);
+    const days = within(fold).getByRole('spinbutton', { name: /days without logging in/i });
+    expect(days).toHaveValue(14);
+    await userEvent.clear(days);
+    await userEvent.type(days, '21');
+    await userEvent.click(within(fold).getByRole('button', { name: /^save$/i }));
+    await waitFor(() => expect(writes()).toHaveLength(1));
+    const w = writes()[0];
+    expect(w).toMatchObject({ method: 'PATCH', path: '/programs/comeback/' });
+    expect(w.body.config.trigger).toEqual({ type: 'inactive', days: 21 });
+    expect(w.body.config.steps).toHaveLength(3);
+  });
+
+  it('lists each step with its day and content status', async () => {
+    renderPage();
+    const fold = await openFold(/^comeback sequence settings$/i);
+    const steps = within(fold).getAllByRole('listitem');
+    expect(steps).toHaveLength(3);
+    expect(steps[0].textContent).toMatch(/day 0/i);
+    expect(steps[0].textContent).toMatch(/approved/i);
+    expect(steps[1].textContent).toMatch(/day 5/i);
+    expect(steps[1].textContent).toMatch(/draft/i);
+    expect(steps[2].textContent).toMatch(/day 10/i);
+    expect(steps[2].textContent).toMatch(/not written/i);
+  });
+
+  it("edits one step's day and subject, PATCHing the whole steps array with the others untouched", async () => {
+    renderPage();
+    const fold = await openFold(/^comeback sequence settings$/i);
+    const step2 = () => within(fold).getAllByRole('listitem')[1];
+    await userEvent.click(within(step2()).getByRole('button', { name: /^edit$/i }));
+    const day = within(step2()).getByRole('spinbutton', { name: /^day$/i });
+    expect(day).toHaveValue(5);
+    await userEvent.clear(day);
+    await userEvent.type(day, '7');
+    const subject = within(step2()).getByRole('textbox', { name: /^subject$/i });
+    expect(subject).toHaveValue('Three patterns to try');
+    await userEvent.clear(subject);
+    await userEvent.type(subject, 'Three new patterns');
+    await userEvent.click(within(step2()).getByRole('button', { name: /save step/i }));
+    await waitFor(() => expect(writes()).toHaveLength(1));
+    const w = writes()[0];
+    expect(w).toMatchObject({ method: 'PATCH', path: '/programs/comeback/' });
+    const [s0, s1, s2] = w.body.config.steps;
+    expect(w.body.config.steps).toHaveLength(3);
+    expect(s1.offset_days).toBe(7);
+    expect(s1.content.subject).toBe('Three new patterns');
+    expect(s0).toEqual(comeback().config.steps[0]);
+    expect(s2).toEqual(comeback().config.steps[2]);
+    await waitFor(() => expect(step2().textContent).toMatch(/day 7/i));
+  });
+
+  it('previews a step as the SERVER rendered it, in a sandboxed iframe', async () => {
+    renderPage();
+    const fold = await openFold(/^comeback sequence settings$/i);
+    const step2 = within(fold).getAllByRole('listitem')[1];
+    await userEvent.click(within(step2).getByRole('button', { name: /^preview$/i }));
+    await waitFor(() => expect(hits.some((h) => h.method === 'GET' && h.path === '/programs/comeback/steps/1/preview/')).toBe(true));
+    const frame = await within(fold).findByTitle(/email preview/i);
+    expect(frame.tagName).toBe('IFRAME');
+    expect(frame.getAttribute('srcdoc')).toContain('<p>Hi Quinn, step 1</p>');
+    expect(frame.hasAttribute('sandbox')).toBe(true);
+    expect(within(fold).getByText('Preview subject 1')).toBeInTheDocument();
+  });
+
+  it('sends a test of a step to the admin only, on click', async () => {
+    renderPage();
+    const fold = await openFold(/^comeback sequence settings$/i);
+    const step1 = within(fold).getAllByRole('listitem')[0];
+    await userEvent.click(within(step1).getByRole('button', { name: /send (a )?test to me/i }));
+    await waitFor(() => expect(writes()).toEqual([
+      expect.objectContaining({ method: 'POST', path: '/test-send/', body: { program_key: 'comeback', step_index: 0 } }),
+    ]));
+    expect(await within(fold).findByText(/test sent to you/i)).toBeInTheDocument();
+  });
+
+  it('a test the guard refused shows why, not "sent"', async () => {
+    db.testSend = { sent: false, reason: 'not_allowlisted' };
+    renderPage();
+    const fold = await openFold(/^comeback sequence settings$/i);
+    await userEvent.click(within(within(fold).getAllByRole('listitem')[0]).getByRole('button', { name: /send (a )?test to me/i }));
+    expect((await within(fold).findByRole('alert')).textContent).toMatch(/not_allowlisted|not allowlisted/i);
+    expect(within(fold).queryByText(/test sent to you/i)).toBeNull();
+  });
+
+  it('writes an empty step with AI, then approves it', async () => {
+    renderPage();
+    const fold = await openFold(/^comeback sequence settings$/i);
+    const last = () => within(fold).getAllByRole('listitem')[2];
+    await userEvent.click(within(last()).getByRole('button', { name: /write with ai/i }));
+    await waitFor(() => expect(writes()[0]).toMatchObject({ method: 'POST', path: '/programs/comeback/steps/2/generate/' }));
+    await waitFor(() => expect(last().textContent).toMatch(/draft/i));
+    await userEvent.click(within(last()).getByRole('button', { name: /^approve$/i }));
+    await waitFor(() => expect(writes()[1]).toMatchObject({ method: 'POST', path: '/programs/comeback/steps/2/approve/' }));
+    await waitFor(() => expect(last().textContent).toMatch(/approved/i));
+  });
+});
+
+describe('comeback sequence: writing fails', () => {
+  it('a failed generation shows the reason and leaves the step unwritten', async () => {
+    db.generation = 'failed';
+    renderPage();
+    const fold = await openFold(/^comeback sequence settings$/i);
+    const last = () => within(fold).getAllByRole('listitem')[2];
+    await userEvent.click(within(last()).getByRole('button', { name: /write with ai/i }));
+    expect((await within(fold).findByRole('alert')).textContent).toMatch(/did not answer in time/i);
+    expect(last().textContent).toMatch(/not written/i);
+  });
+});
+
+// ---- A4: approval mode --------------------------------------------------------
+
+describe('approval (A4)', () => {
+  it('shows the current mode and switches to automatic sending', async () => {
+    renderPage();
+    const fold = await openFold(/^approval$/i);
+    expect(within(fold).getByRole('radio', { name: /i approve each email/i })).toBeChecked();
+    await userEvent.click(within(fold).getByRole('radio', { name: /send automatically/i }));
+    await waitFor(() => expect(writes()[0]).toMatchObject({ method: 'PATCH', path: '/settings/', body: { approval_mode: 'auto' } }));
+  });
+});
+
+// ---- A5: voice -------------------------------------------------------------------
+
+describe('voice (A5)', () => {
+  it('edits the voice and sends avoid_words as a list', async () => {
+    renderPage();
+    const fold = await openFold(/^voice$/i);
+    expect(within(fold).getByRole('textbox', { name: /^product$/i })).toHaveValue('AI crochet patterns from a photo');
+    const tone = within(fold).getByRole('textbox', { name: /^tone$/i });
+    await userEvent.clear(tone);
+    await userEvent.type(tone, 'cheerful');
+    const avoid = within(fold).getByRole('textbox', { name: /words to avoid/i });
+    await userEvent.clear(avoid);
+    await userEvent.type(avoid, 'synergy, leverage');
+    await userEvent.click(within(fold).getByRole('button', { name: /save voice/i }));
+    await waitFor(() => expect(writes()).toHaveLength(1));
+    expect(writes()[0]).toMatchObject({ method: 'PATCH', path: '/settings/' });
+    expect(writes()[0].body.voice).toMatchObject({ tone: 'cheerful', avoid_words: ['synergy', 'leverage'] });
+    for (const label of [/^audience$/i, /call-to-action link/i]) {
+      expect(within(fold).getByRole('textbox', { name: label })).toBeInTheDocument();
+    }
+  });
+});
+
+// ---- A6: sending domain ----------------------------------------------------------
+
+describe('sending domain (A6)', () => {
+  it('until a domain is verified, says mail goes out via the StartSimpli marketing stream', async () => {
+    renderPage();
+    const fold = await openFold(/^sending domain$/i);
+    expect(fold.textContent).toMatch(/startsimpli marketing stream/i);
+  });
+
+  it('connects a domain, shows SPF/DKIM/DMARC records, then re-checks to verified', async () => {
+    renderPage();
+    const fold = await openFold(/^sending domain$/i);
+    await userEvent.type(within(fold).getByRole('textbox', { name: /^domain$/i }), 'crochets.site');
+    await userEvent.click(within(fold).getByRole('button', { name: /connect domain/i }));
+    await waitFor(() => expect(writes()[0]).toMatchObject({ method: 'POST', path: '/settings/domain/', body: { domain: 'crochets.site' } }));
+    const table = await within(fold).findByRole('table');
+    const text = table.textContent ?? '';
+    expect(text).toMatch(/SPF/);
+    expect(text).toMatch(/DKIM/);
+    expect(text).toMatch(/DMARC/);
+    expect(text).toMatch(/_dmarc\.crochets\.site/);
+    expect(fold.textContent).toMatch(/pending/i);
+    await userEvent.click(within(fold).getByRole('button', { name: /check now/i }));
+    await waitFor(() => expect(writes()[1]).toMatchObject({ method: 'POST', path: '/settings/domain/check/' }));
+    await waitFor(() => expect(fold.textContent).toMatch(/verified/i));
+    expect(fold.textContent).not.toMatch(/startsimpli marketing stream/i);
+  });
+});
+
+// ---- A3 + A4: product updates and drafts -------------------------------------------
+
+describe('product updates (A3)', () => {
+  it('saves cadence and audience into the program config', async () => {
+    renderPage();
+    const fold = await openFold(/^product updates$/i);
+    const cadence = within(fold).getByRole('combobox', { name: /cadence/i });
+    expect(cadence).toHaveValue('on_deploy');
+    await userEvent.selectOptions(cadence, 'weekly');
+    await waitFor(() => expect(writes().at(-1)).toMatchObject({ method: 'PATCH', path: '/programs/product_update/', body: { config: { cadence: 'weekly' } } }));
+    await userEvent.selectOptions(within(fold).getByRole('combobox', { name: /audience/i }), 'inactive');
+    await waitFor(() => expect(writes().at(-1)).toMatchObject({ method: 'PATCH', path: '/programs/product_update/', body: { config: { audience: 'inactive' } } }));
+  });
+
+  it('"Send an update now" posts the notes and shows the new draft for review', async () => {
+    renderPage();
+    const fold = await openFold(/^product updates$/i);
+    await userEvent.type(within(fold).getByRole('textbox', { name: /notes/i }), 'Stitch counter is live');
+    await userEvent.click(within(fold).getByRole('button', { name: /send an update now/i }));
+    await waitFor(() => expect(writes()[0]).toMatchObject({
+      method: 'POST', path: '/programs/product_update/send-now/', body: { notes: 'Stitch counter is live' },
+    }));
+    expect(await within(fold).findByText('What is new this week')).toBeInTheDocument();
+  });
+
+  it('while the update is being written it says so, then shows the written draft', async () => {
+    renderPage();
+    const fold = await openFold(/^product updates$/i);
+    await userEvent.click(within(fold).getByRole('button', { name: /send an update now/i }));
+    expect(await within(fold).findByText('What is new this week')).toBeInTheDocument();
+    expect(hits.some((h) => h.method === 'GET' && h.path === '/drafts/d-2/')).toBe(true);
+  });
+
+  it('when the worker finds nothing customer-facing, says so', async () => {
+    db.sendNowResult = { approval: 'discarded', error: 'nothing_customer_facing' };
+    renderPage();
+    const fold = await openFold(/^product updates$/i);
+    await userEvent.click(within(fold).getByRole('button', { name: /send an update now/i }));
+    expect(await within(fold).findByText(/nothing customer-facing/i)).toBeInTheDocument();
+  });
+
+  it('with an update already waiting, points at it instead of drafting another', async () => {
+    db.sendNow = { draft: draft(), reason: 'draft_pending' };
+    db.sendNowStatus = 200;
+    renderPage();
+    const fold = await openFold(/^product updates$/i);
+    await userEvent.click(within(fold).getByRole('button', { name: /send an update now/i }));
+    expect(await within(fold).findByText(/already waiting for your approval/i)).toBeInTheDocument();
+  });
+
+  it('with nothing customer-facing, says so instead of drafting', async () => {
+    db.sendNow = { draft: null, reason: 'nothing_customer_facing' };
+    db.sendNowStatus = 200;
+    renderPage();
+    const fold = await openFold(/^product updates$/i);
+    await userEvent.click(within(fold).getByRole('button', { name: /send an update now/i }));
+    expect(await within(fold).findByText(/nothing customer-facing/i)).toBeInTheDocument();
+  });
+});
+
+describe('draft review (A4)', () => {
+  it('lists only PENDING drafts, asked for with server pagination params', async () => {
+    db.drafts.push(draft({ id: 'd-9', subject: 'Old approved one', approval: 'approved' }));
+    renderPage();
+    const fold = await openFold(/^product updates$/i);
+    expect(await within(fold).findByText('New: stitch counter')).toBeInTheDocument();
+    expect(within(fold).queryByText('Old approved one')).toBeNull();
+    const req = hits.find((h) => h.method === 'GET' && h.path === '/drafts/')!;
+    expect(req.search.get('status')).toBe('pending');
+    expect(req.search.get('page')).toBe('1');
+    expect(req.search.get('page_size')).not.toBeNull();
+  });
+
+  it('previews a draft as the SERVER rendered it (G2), in a sandboxed iframe', async () => {
+    renderPage();
+    const fold = await openFold(/^product updates$/i);
+    await userEvent.click(await within(fold).findByRole('button', { name: /^preview$/i }));
+    await waitFor(() => expect(hits.some((h) => h.method === 'GET' && h.path === '/drafts/d-1/preview/')).toBe(true));
+    const frame = await within(fold).findByTitle(/email preview/i);
+    expect(frame.getAttribute('srcdoc')).toContain('<p>Hi Quinn, New: stitch counter</p>');
+    expect(frame.hasAttribute('sandbox')).toBe(true);
+    expect(writes()).toEqual([]);
+  });
+
+  it('a draft whose writing failed offers only Discard', async () => {
+    db.drafts = [draft({ subject: '', error: 'generation_failed' })];
+    renderPage();
+    const fold = await openFold(/^product updates$/i);
+    expect((await within(fold).findByRole('alert')).textContent).toMatch(/generation failed/i);
+    expect(within(fold).getByRole('button', { name: /^discard$/i })).toBeInTheDocument();
+    expect(within(fold).queryByRole('button', { name: /approve and send/i })).toBeNull();
+    expect(within(fold).queryByRole('button', { name: /^edit$/i })).toBeNull();
+  });
+
+  it('edits a draft subject and saves it', async () => {
+    renderPage();
+    const fold = await openFold(/^product updates$/i);
+    await userEvent.click(await within(fold).findByRole('button', { name: /^edit$/i }));
+    const subject = within(fold).getByRole('textbox', { name: /^subject$/i });
+    await userEvent.clear(subject);
+    await userEvent.type(subject, 'Meet the stitch counter');
+    await userEvent.click(within(fold).getByRole('button', { name: /save draft/i }));
+    await waitFor(() => expect(writes()[0]).toMatchObject({ method: 'PATCH', path: '/drafts/d-1/', body: { subject: 'Meet the stitch counter' } }));
+  });
+
+  it('approves a draft (which queues the send)', async () => {
+    renderPage();
+    const fold = await openFold(/^product updates$/i);
+    await userEvent.click(await within(fold).findByRole('button', { name: /approve and send/i }));
+    await waitFor(() => expect(writes()[0]).toMatchObject({ method: 'POST', path: '/drafts/d-1/approve/' }));
+    await waitFor(() => expect(within(fold).queryByText('New: stitch counter')).toBeNull());
+  });
+
+  it('discards a draft', async () => {
+    renderPage();
+    const fold = await openFold(/^product updates$/i);
+    await userEvent.click(await within(fold).findByRole('button', { name: /^discard$/i }));
+    await waitFor(() => expect(writes()[0]).toMatchObject({ method: 'POST', path: '/drafts/d-1/discard/' }));
+  });
+
+  it('sends a test of a draft to the admin', async () => {
+    renderPage();
+    const fold = await openFold(/^product updates$/i);
+    await within(fold).findByText('New: stitch counter');
+    await userEvent.click(within(fold).getByRole('button', { name: /send (a )?test to me/i }));
+    await waitFor(() => expect(writes()[0]).toMatchObject({ method: 'POST', path: '/test-send/', body: { draft_id: 'd-1' } }));
+  });
+});
+
+// ---- A7: results + send log ---------------------------------------------------
+
+describe('results (A7)', () => {
+  it('shows every number the server reports', async () => {
+    renderPage();
+    const fold = await openFold(/^results$/i);
+    await waitFor(() => expect(fold.textContent).toMatch(/sent\D*120/i));
+    const t = fold.textContent ?? '';
+    expect(t).toMatch(/delivered\D*117/i);
+    expect(t).toMatch(/opened\D*61/i);
+    expect(t).toMatch(/clicked\D*19/i);
+    expect(t).toMatch(/came back\D*11/i);
+    expect(t).toMatch(/unsubscribed\D*2/i);
+    expect(t).toMatch(/bounced\D*3/i);
+  });
+});
+
+describe('send log (A7, server-side pagination)', () => {
+  it('asks the server for page 1 and shows the SERVER total', async () => {
+    renderPage();
+    const fold = await openFold(/^send log$/i);
+    await waitFor(() => expect(within(fold).getAllByRole('row').length).toBeGreaterThan(1));
+    const req = hits.find((h) => h.method === 'GET' && h.path === '/sends/')!;
+    expect(req.search.get('page')).toBe('1');
+    expect(req.search.get('page_size')).toBe('25');
+    // header row + 25 data rows
+    expect(within(fold).getAllByRole('row')).toHaveLength(26);
+    expect(fold.textContent).toMatch(/1\s*[–-]\s*25\s+of\s+120/);
+  });
+
+  it('"Next page" asks the server for page 2', async () => {
+    renderPage();
+    const fold = await openFold(/^send log$/i);
+    await within(fold).findByText('customer1@example.com');
+    await userEvent.click(within(fold).getByRole('button', { name: /next page/i }));
+    await waitFor(() => expect(hits.filter((h) => h.path === '/sends/').at(-1)!.search.get('page')).toBe('2'));
+    expect(await within(fold).findByText('customer26@example.com')).toBeInTheDocument();
+    expect(fold.textContent).toMatch(/26\s*[–-]\s*50\s+of\s+120/);
+  });
+
+  it('filtering by program goes to the server and resets to page 1', async () => {
+    db.sends = [...sendRows(30), ...sendRows(5, 30).map((r) => ({ ...r, program_key: 'product_update' }))];
+    renderPage();
+    const fold = await openFold(/^send log$/i);
+    await within(fold).findByText('customer1@example.com');
+    await userEvent.click(within(fold).getByRole('button', { name: /next page/i }));
+    await waitFor(() => expect(hits.filter((h) => h.path === '/sends/').at(-1)!.search.get('page')).toBe('2'));
+    await userEvent.selectOptions(within(fold).getByRole('combobox', { name: /program/i }), 'product_update');
+    await waitFor(() => {
+      const q = hits.filter((h) => h.path === '/sends/').at(-1)!.search;
+      expect(q.get('program')).toBe('product_update');
+      expect(q.get('page')).toBe('1');
+    });
+    expect(await within(fold).findByText(/1\s*[–-]\s*5\s+of\s+5/)).toBeInTheDocument();
+  });
+});
+
+// ---- admin only --------------------------------------------------------------------
+
+describe('admin only', () => {
+  it('a non-admin (403) sees a plain notice and no controls', async () => {
+    db.settingsStatus = 403;
+    renderPage();
+    expect((await screen.findByRole('alert')).textContent).toMatch(/only foundry admins/i);
+    expect(screen.queryAllByRole('switch')).toHaveLength(0);
+    expect(screen.queryByRole('button', { name: /send an update now/i })).toBeNull();
+  });
+
+  it('a 401 (no valid bearer) is not reported as "not an admin"', async () => {
+    db.settingsStatus = 401;
+    renderPage();
+    const alert = await screen.findByRole('alert');
+    expect(alert.textContent).toMatch(/sign-in was not accepted/i);
+    expect(alert.textContent).not.toMatch(/only foundry admins/i);
+    expect(screen.queryAllByRole('switch')).toHaveLength(0);
+  });
+});