Bundle finalized quotes destined for the same customer contact into a single consolidated email. Less inbox spam, more confidence everything was delivered together.
{pkg.quotes.length} PDFsAdded {pkg.addedBy.at} by {pkg.addedBy.name}
{pkg.sentAt && · Sent {pkg.sentAt}}
{/* Right: total + actions */}
Package Total
{fmtMoney(total)}
{pkg.state === "sent"
?
: }
);
};
// ---------------- Review / Send page ----------------
const SmartSendReviewPage = ({ pkg, onBack }) => {
const [included, setIncluded] = React.useState(() => new Set(pkg.quotes.filter((q) => !q.flagged).map((q) => q.id)));
const [sent, setSent] = React.useState(pkg.state === "sent");
const [streamIdx, setStreamIdx] = React.useState(0);
const includedQuotes = pkg.quotes.filter((q) => included.has(q.id));
const total = includedQuotes.reduce((s, q) => s + q.amount, 0);
const opps = [...new Set(includedQuotes.map((q) => q.opp))];
// Build the AI email
const defaultSubject = `${pkg.customer} — ${includedQuotes.length} quote${includedQuotes.length !== 1 ? "s" : ""} ready for your review`;
const defaultBodyParagraphs = [
`Hi ${pkg.contact.name.split(" ")[0]},`,
`We've finalized ${includedQuotes.length} quote${includedQuotes.length !== 1 ? "s" : ""} for ${pkg.customer} totaling ${fmtMoney(total)} across ${opps.length} ${opps.length === 1 ? "opportunity" : "opportunities"}. To keep things tidy, we've consolidated everything into this single email so your team can review the full package side-by-side.`,
`Each quote is attached as a PDF and grouped below by opportunity. Pricing is held for 30 days. If you'd like to walk through any of the line items together, I'm happy to schedule a call.`,
`Thanks,\nNicole Maddox\nMindworks Sales`,
];
// Edit state — overrides the generated draft when user has edited
const [editing, setEditing] = React.useState(false);
const [editedSubject, setEditedSubject] = React.useState(null);
const [editedBody, setEditedBody] = React.useState(null); // stores HTML when edited
const [aiRewriting, setAiRewriting] = React.useState(false);
const editorRef = React.useRef(null);
const subject = editedSubject !== null ? editedSubject : defaultSubject;
// Body can be plain text (default AI draft) or HTML (after editing)
const bodyText = editedBody !== null ? editedBody : defaultBodyParagraphs.join("\n\n");
const isEditedHTML = editedBody !== null;
const bodyParagraphs = bodyText.split(/\n{2,}/);
const isEdited = editedSubject !== null || editedBody !== null;
// Convert plain text body to simple HTML for the editor
const textToHTML = (txt) =>
txt.split(/\n{2,}/).map((p) => `
${p.replace(/\n/g, " ")}
`).join("");
// Draft buffers used while editing
const [draftSubject, setDraftSubject] = React.useState(subject);
const [draftBodyHTML, setDraftBodyHTML] = React.useState(
isEditedHTML ? bodyText : textToHTML(bodyText)
);
React.useEffect(() => {
if (editing) {
setDraftSubject(subject);
const html = isEditedHTML ? bodyText : textToHTML(bodyText);
setDraftBodyHTML(html);
// Inject into the editable element on enter
requestAnimationFrame(() => {
if (editorRef.current && editorRef.current.innerHTML !== html) {
editorRef.current.innerHTML = html;
}
});
}
}, [editing]);
const onSaveEdit = () => {
setEditedSubject(draftSubject);
setEditedBody(editorRef.current ? editorRef.current.innerHTML : draftBodyHTML);
setEditing(false);
};
const onResetToAI = () => {
setEditedSubject(null);
setEditedBody(null);
setEditing(false);
};
const onAIRewrite = (tone) => {
setAiRewriting(true);
setTimeout(() => {
const variants = {
warmer: `Hi ${pkg.contact.name.split(" ")[0]},\n\nHope you're doing well! I'm excited to share that we've put together ${includedQuotes.length} finalized quote${includedQuotes.length !== 1 ? "s" : ""} for ${pkg.customer} — ${fmtMoney(total)} in total across ${opps.length} ${opps.length === 1 ? "opportunity" : "opportunities"}. Bundling them so it's easier to compare side by side.\n\nEach quote is attached as a PDF, grouped by opportunity below. Happy to jump on a quick call any time — just let me know what works.\n\nWarmly,\nNicole`,
shorter: `Hi ${pkg.contact.name.split(" ")[0]},\n\nAttached: ${includedQuotes.length} finalized quote${includedQuotes.length !== 1 ? "s" : ""} for ${pkg.customer} (${fmtMoney(total)} total) across ${opps.length} ${opps.length === 1 ? "opportunity" : "opportunities"}. Pricing valid 30 days.\n\nHappy to walk through any of it together.\n\n— Nicole`,
formal: `Dear ${pkg.contact.name},\n\nPlease find attached ${includedQuotes.length} finalized quote${includedQuotes.length !== 1 ? "s" : ""} for ${pkg.customer}, with a combined value of ${fmtMoney(total)} spanning ${opps.length} ${opps.length === 1 ? "opportunity" : "opportunities"}. Each document is grouped by opportunity in the summary below.\n\nThese terms remain valid for thirty (30) days. I am available to schedule a review session at your convenience.\n\nRegards,\nNicole Maddox\nMindworks Sales`,
};
const newHTML = textToHTML(variants[tone] || "");
setDraftBodyHTML(newHTML);
if (editorRef.current) editorRef.current.innerHTML = newHTML;
setAiRewriting(false);
}, 900);
};
// Token stream effect for the AI-drafted body (only when NOT editing & not customized)
const tokens = React.useMemo(() => bodyText.split(/(\s+)/), [bodyText]);
React.useEffect(() => {
if (sent) { setStreamIdx(tokens.length); return; }
if (isEdited) { setStreamIdx(tokens.length); return; } // skip streaming after user edits
setStreamIdx(0);
let i = 0;
const id = setInterval(() => {
i += 2;
setStreamIdx(i);
if (i >= tokens.length) clearInterval(id);
}, 18);
return () => clearInterval(id);
}, [pkg.id, tokens.length, included.size, isEdited]);
const streamedText = tokens.slice(0, streamIdx).join("");
const isStreaming = streamIdx < tokens.length;
const toggle = (qid) => {
setIncluded((prev) => {
const next = new Set(prev);
if (next.has(qid)) next.delete(qid); else next.add(qid);
return next;
});
};
const flaggedRemaining = pkg.quotes.filter((q) => q.flagged && included.has(q.id));
const canSend = flaggedRemaining.length === 0 && includedQuotes.length > 0 && !sent;
const meta = SS_STATE_META[pkg.state];
return (
{/* Breadcrumb + header */}
SmartSend{pkg.customer}
{pkg.customer} · Review Package
{sent ? "Sent" : meta.label}
To: {pkg.contact.name} · {pkg.contact.email} · {pkg.contact.role}
{/* Duplicate-send guardrail */}
{sent && (
Sent to {pkg.contact.email} · {includedQuotes.length} quotes attached · This package is now locked to prevent duplicate sends.
)}
{flaggedRemaining.length > 0 && !sent && (
Resolve {flaggedRemaining.length} flagged quote{flaggedRemaining.length !== 1 ? "s" : ""} before sending.
{flaggedRemaining[0].flagReason} · Remove or resolve to enable sending.
)}
{/* LEFT: Included Quotes */}
Included Quotes
{includedQuotes.length} of {pkg.quotes.length} selected · grouped by opportunity