// Phase 4: Results + Email capture + PDF export
function Phase4({ state, setState, onBack }) {
const { tasks, blueprintPicks, email, emailSubmitted } = state;
const picks = blueprintPicks.map(p => ({ ...p, task: tasks.find(t => t.id === p.taskId) })).filter(p => p.task);
const totalPickHours = picks.reduce((a, p) => a + (Number(p.task.hours) || 0), 0);
// Annual hours reclaimed. The playbook lives in hours, not dollars.
const annualHoursBack = Math.round(totalPickHours * 50);
// Equivalent full work weeks (40 hr) makes the number tangible.
const weeksBack = Math.round(annualHoursBack / 40);
const [emailDraft, setEmailDraft] = React.useState(email || '');
const [status, setStatus] = React.useState('idle'); // idle | sending | sent
// The booking modal (overlay + lazy-loaded /booking-widget.html) lives in
// components/BookingModal.jsx as a singleton mounted to . Phase4 just
// opens it via the global; the modal handles its own state, scroll lock,
// and Esc-to-close.
// Build the summary payload that gets sent to the Worker alongside the PDF.
// Worker uses it to enrich the HubSpot contact + team notification email.
const buildSummary = () => ({
totalPickHours,
annualHoursBack,
weeksBack,
blueprintPicks: picks.map(p => ({
name: p.task.name,
hours: p.task.hours,
doneLooksLike: p.doneLooksLike || null,
tool: p.tool || null,
})),
});
// Submit the email and PDF to the Worker.
// PDF generation + the network call live in window.bluemoso (see /website/lib/).
// This component just manages UI state and orchestrates.
const submitEmail = async () => {
const trimmed = emailDraft.trim();
if (!/^\S+@\S+\.\S+$/.test(trimmed)) { alert('Please enter a valid email.'); return; }
setStatus('sending');
try {
const pdfBase64 = await window.bluemoso.pdf.generateBase64FromElement('playbook-pdf-content');
// turnstileMount tells the lib to render the CAPTCHA inline within
// this form (above the helper text) instead of as a floating overlay.
await window.bluemoso.api.submitPlaybook({
email: trimmed,
summary: buildSummary(),
pdfBase64,
turnstileMount: '#cf-turnstile-playbook',
});
setState(s => ({ ...s, email: trimmed, emailSubmitted: true }));
setStatus('sent');
// Track conversion: lead captured via playbook funnel.
// email_domain (not full email) keeps GA free of PII while still
// letting us segment by business vs. consumer email providers.
window.bluemoso.analytics.track('playbook_email_submitted', {
email_domain: trimmed.split('@')[1] || null,
picks_count: picks.length,
annual_hours_back: annualHoursBack,
});
} catch (err) {
console.error('Playbook submit failed:', err);
window.bluemoso.analytics.track('playbook_email_submit_failed', {
error_message: err && err.message ? err.message : 'unknown',
});
alert(`Couldn't send: ${err.message || 'unknown error'}. You can use the "Save as PDF now" button below instead.`);
setStatus('idle');
}
};
// (Direct PDF download removed — PDF delivery is email-only so we capture
// a real address for the lead. lib/bluemoso.js still exposes
// saveLocallyFromElement if we ever want to re-introduce a download path.)
// Let the user fix a typo and re-submit. Returns the form to the email
// input state with the previous draft pre-filled so they can edit it.
const resendToDifferentEmail = () => {
setState(s => ({ ...s, emailSubmitted: false }));
setStatus('idle');
// emailDraft stays — user edits the typo or clears it.
window.bluemoso.analytics.track('playbook_email_resent', {
prior_email_domain: emailDraft && emailDraft.includes('@')
? emailDraft.split('@')[1]
: null,
});
};
return (
{/* Headline stats */}
{/* Action plan */}
Your top delegation moves
{picks.map((p, i) => (
0{i + 1}
{p.task.name}
{p.doneLooksLike || No "done" defined yet, go back and add it.}
{p.tool &&
Assigned in: {p.tool}
}
{p.task.hours} hrs
per week back
))}
{/* Checklist */}
Before you hand off, the 5-point checklist
{[
'I tracked my recurring tasks honestly',
'I picked 3 things to delegate first',
'I gave clear instructions, what "done" looks like',
'I scheduled a follow-up in week one',
"I'll give feedback early, not hold it until it's festering",
].map((item, i) => (
))}
{/* Email capture + PDF */}
TAKE IT WITH YOU
Get your plan in your inbox.
Drop your email and we'll send a formatted PDF of this plan straight to you. You'll also get occasional notes on delegation, VAs, and scaling without burnout.
No spam. Unsubscribe any time.
{!emailSubmitted ? (
setEmailDraft(e.target.value)}
placeholder="you@company.com"
required
autoComplete="email"
style={{
width: '100%', padding: '14px 16px',
fontSize: 15, border: '1px solid var(--line)',
borderRadius: 12, background: '#fff', marginBottom: 12,
}}
/>
{/* Inline Turnstile mount. Collapses to 0×0 when no challenge
is needed; grows in-flow above the helper text when a
challenge is required. size:'flexible' lets the widget
adapt to the column width on mobile, tablet, and desktop. */}
We'll send a formatted PDF you can save or print.
) : (
✓
We'll send it to {email}
Check your inbox in the next few minutes. If you don't see it, check your spam or promotions folder.
)}
{/* Book a call CTA */}
NEXT STEP
Don't want to do the delegating yourself? That's what we do.
BlueMoso matches you with a virtual assistant trained to own these exact tasks. Bring your plan to a 20-minute call and we'll tell you who we'd pair you with.
{
// Open the modal FIRST, track AFTER — so a tracking failure
// (e.g. window.bluemoso.analytics undefined) can't block the user.
if (window.bluemoso && window.bluemoso.bookingModal) {
window.bluemoso.bookingModal.open('playbook_phase4_cta');
}
try {
if (window.bluemoso && window.bluemoso.analytics) {
window.bluemoso.analytics.track('playbook_book_call_clicked', {
email_submitted: !!emailSubmitted,
picks_count: picks.length,
annual_hours_back: annualHoursBack,
});
}
} catch (e) {
if (window.console && console.warn) console.warn('[analytics] book_call track failed:', e);
}
}}>
Book a call with BlueMoso
{/* Booking modal lives in components/BookingModal.jsx as a body-mounted
singleton. The button above calls window.bluemoso.bookingModal.open() */}
{/* Off-screen PDF template, captured by the PDF generation flow via #playbook-pdf-content */}
{typeof PlaybookPdfTemplate === 'function' && (
)}
);
}
function BigStat({ label, value, unit, tone = 'light' }) {
const color = tone === 'blue' ? '#9FCCF5' : '#fff';
return (
{label}
{value}
{unit}
);
}
// BookingModal + BookingWidgetMount live in components/BookingModal.jsx now —
// shared with the hub pages (virtual-assistants.html, services.html,
// who-we-serve.html). Phase4 opens it via window.bluemoso.bookingModal.open().
Object.assign(window, { Phase4 });