// Draft Review — final stage. Subject + email editable inline + copy + send-to-clipboard.
// One draft per brand. Tone is warm/friendly/consultative. Never mentions news trigger directly.
function DraftReview({ brands, selectedBrandId, onSelectBrand, onUpdateDraft, onNavigate, onToast, onGenerateDraft, onUpdateBrand, onRebuildAll, currentUser, onMoveToResearch, approvals }) {
const [generatingId, setGeneratingId] = React.useState(null);
const [rebuilding, setRebuilding] = React.useState(false);
const [confirm, confirmEl] = useConfirm();
const handleRebuildAll = async () => {
if (!onRebuildAll || rebuilding) return;
const ok = await confirm({
title: 'Rebuild all drafts?',
message: 'Every existing draft is rewritten by the AI in IPSEM’s proven partnership-proposal format (fixed intro and close, bespoke middle). This replaces the current draft text for all brands that have one, including any manual edits, and can take a few minutes.',
confirmLabel: 'Rebuild all',
danger: true,
});
if (!ok) return;
setRebuilding(true);
try { await onRebuildAll(); } finally { setRebuilding(false); }
};
const runGenerate = async (id) => {
if (!onGenerateDraft || generatingId) return;
setGeneratingId(id);
onToast('Writing outreach draft…');
try { await onGenerateDraft(id); }
catch (e) { /* toast handled upstream */ }
finally { setGeneratingId(null); }
};
// Any brand with a confirmed property (draft or not) — so brands without a
// draft still appear, with a "Generate draft" action. Newest first (by
// review date), matching Brand Research and Property Match.
// Same shared test as Contacts, plus: a brand keeps its draft when its property
// is removed (confirmMatch supports that), and draftReadyNotSent still counts
// it. The hand-rolled version dropped those rows from this page while the
// Dashboard tile and sidebar badge still counted them — clicking the tile
// landed on a list that did not contain the brand. It also let held/closed
// brands into "All", so that tab never summed to the other four.
const draftable = brands.filter((b) =>
!pbIsHeldOrClosed(b) && (pbConfirmed(b).length > 0 || !!b.draft));
// Shared with Research, Match and Contacts — one filter setting for the flow.
const f = useBrandFilters(draftable);
// The three states a draft can be in, which are three different jobs: write
// it, send it, or wait for a reply.
const [gate, setGate] = usePersistentState('draft.gate', 'todo'); // todo | needs | ready | sent | all
const counts = React.useMemo(() => {
const c = { needs: 0, ready: 0, sent: 0 };
draftable.forEach((b) => {
if (needsDraft(b)) c.needs += 1;
else if (draftReadyNotSent(b)) c.ready += 1;
else if (draftSent(b)) c.sent += 1;
});
return { ...c, todo: c.needs + c.ready, all: draftable.length };
}, [draftable]);
const sorted = [...draftable]
.filter((b) => {
if (!f.matches(b)) return false;
if (gate === 'all') return true;
if (gate === 'todo') return needsDraft(b) || draftReadyNotSent(b);
if (gate === 'needs') return needsDraft(b);
if (gate === 'ready') return draftReadyNotSent(b);
if (gate === 'sent') return draftSent(b);
return true;
})
// Needs-a-draft first, then ready-to-send, then sent; newest within each.
.sort((a, b) => {
const rank = (x) => needsDraft(x) ? 0 : draftReadyNotSent(x) ? 1 : 2;
const ra = rank(a), rb = rank(b);
if (ra !== rb) return ra - rb;
// Among sent brands, most recently sent first — that is the useful order
// when you are chasing replies.
if (ra === 2) return String(sentInstant(b) || '').localeCompare(String(sentInstant(a) || ''));
return (b.reviewDate || '').localeCompare(a.reviewDate || '');
});
const selected = brands.find((b) => b.id === selectedBrandId && draftable.some((d) => d.id === b.id)) || sorted[0];
React.useEffect(() => {
if (selected && (!selectedBrandId || !draftable.some((d) => d.id === selectedBrandId))) {
onSelectBrand(selected.id);
}
}, []);
if (!selected) {
return (
{f.active ? 'No brands match these filters.' : 'Nothing to draft yet.'}
{f.active
? 'The shared tier / category / assignee / country filters are hiding every confirmed brand.'
: 'Confirm a property match for a brand and it appears here, ready for a draft.'}
{b.draft ? (
<>
{/* Count comes from the brand's CURRENT confirmed
properties, not from the mode stored on the draft.
The draft keeps whatever mode it was written with, so
changing the property selection afterwards left the
two disagreeing: Head & Shoulders read "1 properties",
and Giti Tire read "1 property" while three were
actually confirmed. Generic is still the draft's own
call — that one is a real drafting decision. */}
{propMode === 'generic'
? 'Generic'
: `${propCount} ${propCount === 1 ? 'property' : 'properties'}`}
{/* "Formal" used to sit here. Every draft in the book is
the same house format, so the word appeared on all 260
rows and told you nothing. Whether the AI actually
wrote it does distinguish rows — 32 fell back to the
template because the AI was down, and those are the
ones worth regenerating. */}
{b.draft.source === 'template' ? (
Template
) : null}
) : (
No draft yet
)}
{/* When it went out. Relative ("2 days ago") because the team is
across three time zones; hover for the exact instant. */}
{draftSent(b) && sentInstant(b) ? (
Sent
) : null}
);
})}
{sorted.length === 0 ? (
No brands match these filters.
) : null}
{/* A rightsholder that refused this brand cannot be pitched on. Said
here, before the work, rather than as a failed save afterwards. */}
{selected.draft ? (
runGenerate(selected.id)}
regenerating={generatingId === selected.id}
onUpdateBrand={onUpdateBrand}
confirm={confirm}
currentUser={currentUser}
onMoveToResearch={onMoveToResearch}
/>
) : (
{generatingId === selected.id ? (
<>
Writing outreach draft…
Short, professional, signed with your name. This takes a few seconds.
) : (
<>
No draft yet for {selected.brand}
Generate a partnership-proposal email pitching {selected.brand} as {selected.confirmedProperties.map((p) => p === 'generic' ? 'an IPSEM rightsholder' : propName(p)).join(', ')}'s Official Partner.
Warm, natural, UK English. Ends "Warm regards" for you to add your signature.
)}
)}
{confirmEl}
);
}
function DraftEditor({ brand, onUpdateDraft, onNavigate, onToast, onRegenerate, regenerating, onUpdateBrand, confirm, currentUser, onMoveToResearch }) {
const [subject, setSubject] = React.useState(brand.draft?.subject || '');
const [body, setBody] = React.useState(brand.draft?.body || '');
const [saved, setSaved] = React.useState(true);
// Reset state when the brand OR its draft changes (e.g. after regenerate).
React.useEffect(() => {
setSubject(brand.draft?.subject || '');
setBody(brand.draft?.body || '');
setSaved(true);
}, [brand.id, brand.draft?.generatedAt]);
// Debounced save
React.useEffect(() => {
if (saved) return;
const t = setTimeout(() => {
onUpdateDraft(brand.id, { subject, body });
setSaved(true);
}, 600);
return () => clearTimeout(t);
}, [subject, body, saved, brand.id, onUpdateDraft]);
const propMode = brand.draft?.propertyMode;
const props = brand.confirmedProperties || [];
// Picking recipients also syncs the "Dear …" salutation to their first name(s).
const applyRecipients = (next) => {
onUpdateDraft(brand.id, { recipients: next });
const lines = body.split('\n');
const idx = lines.findIndex((l) => l.trim().length > 0);
if (idx >= 0 && /^dear\b/i.test(lines[idx].trim())) {
lines[idx] = salutation(next);
setBody(lines.join('\n'));
setSaved(false);
}
};
// Auto-resize textarea
const bodyRef = React.useRef(null);
React.useEffect(() => {
const el = bodyRef.current;
if (el) {
el.style.height = 'auto';
el.style.height = `${el.scrollHeight + 4}px`;
}
}, [body]);
// ─── Outreach loop: send, follow-up, do-not-contact guards ────────────────
const recipientNames = brand.draft?.recipients || [];
const recipientEmails = (brand.contacts || [])
.filter((c) => recipientNames.includes(c.name) && c.email)
.map((c) => c.email);
const mailtoHref = `mailto:${recipientEmails.join(',')}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
const dnc = !!brand.doNotContact;
const already = brand.outreachStatus && brand.outreachStatus !== 'not_contacted';
const isPartner = brand.contactStatus === 'established';
const hasPlaceholders = body.includes('[YOUR NAME]') || body.includes('[YOUR POSITION]');
const markSent = () => {
const today = ipsemToday();
const nowIso = new Date().toISOString();
onUpdateBrand(brand.id, {
outreachStatus: 'contacted',
outreachSentDate: brand.outreachSentDate || today,
// The exact instant, not just the office day — response times are measured
// off this, and the team spans GMT+0, +1 and +8.
outreachSentAt: brand.outreachSentAt || nowIso,
outreachContact: recipientNames.join(', ') || brand.outreachContact || null,
nextFollowUp: brand.nextFollowUp || addBusinessDays(today, 5),
outreachHistory: [...(brand.outreachHistory || []), { action: 'sent', date: today, at: nowIso, note: `Emailed ${recipientNames.join(', ') || 'contact'}` }],
});
};
// Opening the mail client is not sending. The app cannot see your outbox, so
// it asks — otherwise a draft you opened and thought better of is recorded as
// sent, with a timestamp that response-time reporting would then treat as real.
const openInEmail = async () => {
if (dnc) { onToast('This brand is marked do-not-contact.'); return; }
if (!subject.trim()) { onToast('Add a subject line first.'); return; }
if (!recipientEmails.length) { onToast('Pick a contact with an email in the To field first.'); return; }
window.open(mailtoHref, '_blank');
const sent = await confirm({
title: `Did you send the email to ${brand.brand}?`,
message: `Only confirm once it has actually left your outbox. Confirming records the exact send time, marks ${brand.brand} as contacted and sets a follow-up in 5 working days. If you closed the draft without sending, choose Not yet.`,
confirmLabel: 'Yes, it is sent',
cancelLabel: 'Not yet',
});
if (!sent) {
onToast(`${brand.brand} left as not contacted — nothing recorded`);
return;
}
markSent();
onToast(`${brand.brand} marked as contacted — follow-up set for 5 working days`);
};
const toggleDnc = () => {
if (dnc) { onUpdateBrand(brand.id, { doNotContact: false, dncReason: null }); onToast('Do-not-contact removed'); return; }
const reason = window.prompt('Reason for do-not-contact (optional):', '');
if (reason === null) return; // cancelled
onUpdateBrand(brand.id, { doNotContact: true, dncReason: reason.trim() || null });
onToast(`${brand.brand} marked do-not-contact`);
};
return (
{/* Tier / status / relationship / outreach / assignee / actions — the
same strip on every stage. */}
{/* Notes — same panel, same position as every other stage: directly under
the brand header. Reads and writes the one shared list. */}
{onUpdateBrand ? (
) : null}
{/* Rules strip */}
Tone: warm · natural · UK EnglishOfficial Partner proposal~200-260 wordsEnds "Warm regards" — add your own signature
{/* Same reasoning as the list row: count from the live properties, so
a selection changed after drafting cannot leave this contradicting
the panel right below it. */}
{propMode === 'generic' ? 'Generic mode: avoids property names' :
props.length === 1 ? 'Single property' : `Multi-property: ${props.length} properties`}
{brand.draft?.source === 'template' ? (
Template draft — regenerate for AI version
) : null}