// Services, Configure, Quote, Details, Booking screens
// ─── MailerLite helpers ──────────────────────────────────────
// Public embedded-form endpoint. No API key on the client.
// Two forms, one per purpose — each form is tied to a MailerLite group.
const ML_ACCOUNT = '1508707';
const ML_FORM_NEWSLETTER = 'GanUq8'; // TODO: get numeric form ID from HTML embed action URL
const ML_FORM_QUOTE = '185180964760061679'; // "Quote submitted" — from HTML embed action URL
function _postMlForm(formId, fields) {
if (!fields.email || !/@/.test(fields.email)) return Promise.resolve({ skipped: true });
const body = new FormData();
Object.entries(fields).forEach(([k, v]) => {
if (v !== undefined && v !== null && v !== '') body.append(`fields[${k}]`, String(v));
});
body.append('ml-submit', '1');
body.append('anticsrf', 'true');
return fetch(
`https://assets.mailerlite.com/jsonp/${ML_ACCOUNT}/forms/${formId}/subscribe`,
{ method: 'POST', body, mode: 'no-cors' }
).catch(() => ({ error: true }));
}
// Newsletter opt-in only (ticked box on DetailsStep)
function subscribeToNewsletter({ email, name, business, quote_monthly }) {
return _postMlForm(ML_FORM_NEWSLETTER, {
email, name, company: business, quote_monthly,
});
}
// Quote completion — fires whether or not they consented to the newsletter.
// Routes into "Quote submitted" group → triggers the thank-you automation
// to the client + admin notification to Libby.
//
// NOTE: MailerLite's "Quote submitted" form only has an email field defined.
// We therefore submit email + name only — the full quote details (phone,
// business, pricing, service list) are captured via the Formspree admin
// email, which is the source of truth for Libby's action queue.
function submitQuoteToMailerLite({ email, name }) {
return _postMlForm(ML_FORM_QUOTE, {
email,
name,
});
}
// ─── Screen 3 — Pick services ────────────────────────────────
function ServicesStep({ state, setState, onNext, onBack }) {
const { selected = {} } = state;
const [pensionModal, setPensionModal] = React.useState(false);
const [infoOpen, setInfoOpen] = React.useState(null); // service title string
// Auto-select any locked/_defaultOn services once
React.useEffect(() => {
const next = { ...selected };
let changed = false;
(window.PRICING || []).forEach(s => {
if (s._defaultOn && !next[s.title]) { next[s.title] = {}; changed = true; }
});
if (changed) setState({ selected: next });
// eslint-disable-next-line
}, []);
const toggle = (svc) => {
if (svc._locked) return; // can't untick non-negotiable
const next = { ...selected };
const turningOn = !next[svc.title];
if (next[svc.title]) delete next[svc.title]; else next[svc.title] = {};
// Self Assessment add-ons require the Base return
const SA_BASE = 'Self Assessment Tax Return - Base';
const SA_ADDONS = [
'Self Assessment Tax Return - Additional Sections',
'Tax Investigation Protection for your personal tax affairs',
];
if (turningOn && SA_ADDONS.includes(svc.title) && !next[SA_BASE]) {
// User ticked an add-on but hasn't ticked the base — auto-tick the base
next[SA_BASE] = {};
}
if (!turningOn && svc.title === SA_BASE) {
// User unticked the base — clear any add-ons that depend on it
SA_ADDONS.forEach(t => { delete next[t]; });
}
setState({ selected: next });
// Pop-up for Auto Enrolment Pension — regulator duties flagged on select
if (turningOn && svc.title === 'Auto Enrolment Pension') setPensionModal(true);
};
// Group services by section
const grouped = {};
(window.PRICING || []).forEach(s => {
if (s.section === 'UN Global Goals - What should we support on your behalf?') return;
// Only show AML from the Onboarding Process section (it's required by law)
if (s.section === 'Onboarding Process' && !/anti money laundering/i.test(s.title)) return;
(grouped[s.section] ||= []).push(s);
});
const estimate = () => {
let total = 0;
Object.entries(selected).forEach(([title, cfg]) => {
const svc = (window.PRICING || []).find(s => s.title === title);
if (!svc) return;
// Inject default software + turnover from state into unset drivers
const merged = { 'Software Type': state.software || 'Xero', 'Annual Revenue Range': state.turnover, ...cfg };
total += priceService(svc, merged);
});
return total;
};
const count = Object.keys(selected).length;
const est = estimate();
return (
Not sure yet? Pick what sounds right — we'll talk it through on your free discovery call.
{pensionModal && setPensionModal(false)}/>}
{infoOpen && (window.SERVICE_DESCRIPTIONS || {})[infoOpen] && (
setInfoOpen(null)}
/>
)}
);
}
// ─── Pension regulator note ─────────────────────────────────
// Fires when a client ticks Auto Enrolment Pension — surfaces the fact
// that TPR duties exist (declaration of compliance, re-enrolment every 3 yrs,
// ongoing assessments) without bogging down the quote flow. Soft-inform only.
function PensionRegulatorModal({ onClose }) {
return (
e.stopPropagation()}>
A note on pension duties
As an employer you've got ongoing responsibilities to The Pensions Regulator — declaration of compliance, re-enrolment every 3 years, record-keeping, and regular assessments.
We'll talk through exactly what falls to you vs. what we handle on your free discovery call — nothing to sort right now.
);
}
// ─── Essential software bundle explainer ────────────────────
// Inline disclosure on the locked "Essential software bundle" card — expands
// to show what each tool does. Not a modal: the client can't opt out, so we're
// not interrupting a decision, just helping them understand value for the £15.
function EssentialBundleCard() {
const [open, setOpen] = React.useState(false);
const tools = [
{ name: 'Streem', sub: 'Pulls bank statements from 300+ UK banks, automatically.', href: 'https://streemconnect.com/' },
{ name: 'Apron', sub: 'Our document hub. Snap photos of receipts and paperwork from your phone and it all flows straight to us — optional customer payment links available if you\'d like to get paid through it too.', href: 'https://getapron.com/' },
{ name: 'Xenon', sub: 'Monthly health checks on your books — catches issues early.', href: 'https://www.xenonconnect.com/' },
{ name: 'Adsum', sub: 'Secure HMRC tax portal for filings and correspondence.', href: 'https://www.adsum-works.com/' },
{ name: 'Engager', sub: 'Your client portal: e-signing, secure documents, task updates.', href: 'https://engager.app/' },
];
return (
The Ethical Bookkeeper uses the latest secure software and portals to streamline your services and make your life easier.
);
}
// Driver row — renders one driver (range/select/numeric/frequency/boolean/select_count)
function DriverRow({ svc, name, d, cfg, setCfg }) {
const [expanded, setExpanded] = React.useState(false);
const [helpOpen, setHelpOpen] = React.useState(false);
const LIMIT = 8;
// Inline "Not sure?" helper surface — attached to specific driver labels we
// know folks commonly don't remember (confirmation statement due month, etc).
// Keeps the quote moving without dragging them into Companies House.
const helperLabel =
/^Month confirmation statement is due$/i.test(name) ? 'Not sure when?' :
null;
const helperBody =
/^Month confirmation statement is due$/i.test(name) ? {
title: "Don't know the month?",
body: "Your confirmation statement is due yearly, around the anniversary of incorporation — this is a director's responsibility. You can check the exact date at Companies House using your company name. If it's wrong now, no drama — we'll correct it on the discovery call, though note it may affect any catch-up calculation.",
link: {
href: 'https://find-and-update.company-information.service.gov.uk/',
label: 'Check on Companies House',
sub: 'Free — search by your company name',
},
} : null;
// Build option list based on type
let opts = d.options || [];
if (d.type === 'frequency' && opts.length === 0) {
opts = [
{ label: 'Monthly', value: 1 },
{ label: 'Weekly', value: 1.1 },
{ label: 'Daily', value: 1.3 },
];
} else if (d.type === 'boolean' && opts.length === 0) {
opts = [
{ label: 'No', value: 1 },
{ label: 'Yes', value: 1.15 },
];
}
return (
Required by law (MLR 2017) for every new client — verifies each beneficial owner (>25% ownership), anyone with significant control, and the signatory. One-off charge, done via our secure digital portal in minutes.
Pro-rata applies. If you onboard part-way through the year, you're charged for the months already passed. E.g. joining in month 7 means months 1–7 are billed in your first month.
)}
{isVariance && (
Final price depends on complexity — we'll confirm on your free discovery call.
More than 3 months behind on VAT. HMRC penalties are likely, and this work will be urgent and more involved — additional charges may apply. We'll confirm the final fee on your free discovery call.
To email your quote and book a free discovery call, you'll also join our monthly newsletter — one honest, practical email a month from Libby. No sales spam, unsubscribe any time with one click. Fair trade?
{!newsletter && (
If you'd rather not subscribe, we'll open your email app so you can get in touch directly at hello@theethicalbookkeeper.co.uk.
)}
A full Letter of Engagement will be provided before any work begins. Your data is handled in line with our Privacy Policy.
);
}
// ─── Screen 7 — Book discovery call via Microsoft Bookings ─────
function BookStep({ state, onBack, onConfirm }) {
// The live Bookings page. If this ever 404s, it's because the mailbox isn't
// published as a Bookings page — not something a query string will fix.
const BOOKINGS_URL = 'https://outlook.office.com/book/hellotheethicalbookkeepercouk@theethicalbookkeeper.co.uk/s/GYvclrec20uTOUNpcjZ95w2?ismsaljsauthenabled';
// Old personal-booking URL (kept as comment in case we ever need to revert):
// 'https://outlook.office.com/bookwithme/user/...k';
const svcs = (window.PRICING || []).filter(s => (state.selected || {})[s.title]);
let monthly = 0;
svcs.forEach(svc => {
const cfg = { 'Software Type': state.software || 'Xero', 'Annual Revenue Range': state.turnover, ...(state.selected[svc.title]) };
if (svc.billing === 'monthly' && !/^Catch Up: Previous Years/i.test(svc.title || '')) monthly += priceService(svc, cfg);
});
// Newsletter consent already collected on DetailsStep — default true if not set.
const consented = state.newsletter !== false;
// Fires once — whichever path the user takes. Routes to "Quote submitted" group,
// which triggers both the client thank-you email and the admin notification to Libby.
const sendQuoteToMailerLite = () => {
submitQuoteToMailerLite({
email: state.email, name: state.name, business: state.business,
phone: state.phone, quote_monthly: Math.round(monthly),
});
// If they ALSO opted into the newsletter, add to that group too.
if (consented) {
subscribeToNewsletter({
email: state.email, name: state.name, business: state.business,
quote_monthly: Math.round(monthly),
});
}
};
// Microsoft Bookings does not accept arbitrary name/email URL params, so just open the page.
const openBooking = () => {
sendQuoteToMailerLite();
window.open(BOOKINGS_URL, '_blank', 'noopener');
if (onConfirm) onConfirm('booked');
};
// "I'll book later" — the KEY path. We want Libby to know a quote happened
// even if the client doesn't book. This fires the MailerLite group add too.
const bookLater = () => {
sendQuoteToMailerLite();
if (onConfirm) onConfirm('later');
};
const emailInstead = () => {
sendQuoteToMailerLite();
const subject = encodeURIComponent(`Discovery call request — ${state.business || state.name || 'new client'}`);
const body = encodeURIComponent(
`Hi Libby,\n\nI'd like to book a discovery call.\n\n`
+ `Name: ${state.name || ''}\n`
+ `Business: ${state.business || ''}\n`
+ `My quote: ${gbp(monthly)}/mo\n\n`
+ `Thanks!`
);
window.location.href = `mailto:hello@theethicalbookkeeper.co.uk?subject=${subject}&body=${body}`;
if (onConfirm) onConfirm('emailed');
};
return (
}>
Free discovery call · on Microsoft Teams
Tap the button below and you'll see Libby's real Outlook availability. Pick a slot — you'll get a confirmation email with a Teams link straight away, and it'll land in your calendar.
);
}
// ─── Screen 7 — Thanks / post-booking ────────────────────────────────
function ThanksStep({ state, path, onRestart }) {
// path: 'booked' | 'later' | 'emailed'
const title = path === 'booked' ? "You're booked in." :
path === 'emailed' ? 'Email on its way.' :
"Thanks — we'll be in touch.";
const sub = path === 'booked'
? "Libby will see you at your chosen slot. A calendar invite and confirmation email are on their way."
: path === 'emailed'
? "Your email client should have opened with a pre-filled message to Libby. Hit send when you're ready."
: "Libby's been notified of your quote. She'll reach out within 1 business day to help you book a slot.";
return (
}>
{title}
{sub}
What happens next
{[
path === 'booked'
? 'Check your inbox for the calendar invite (plus a reminder the day before).'
: "Libby will be in touch to find a time that works for you.",
'On the call, we\'ll walk through your quote and answer any questions.',
'If you\'re happy, we\'ll send you a welcome pack and get you onboarded.',
].map((text, i) => (