// onboarding.jsx — EZText "Get started" flow
// Steps: business (basics + number details) → payment → confirmation/scheduling.
// Requires React loaded first. Styles in mila.css + onboarding.css.
const OnboardingApp = (() => {
const { useState, useEffect, useRef } = React;
// ── Validation + formatting helpers ─────────────────────────
const digits = (v) => v.replace(/\D/g, "");
const emailOk = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim());
const siteOk = (v) => /\S+\.\S+/.test(v.trim());
const zipOk = (v) => /^\d{5}$/.test(v);
const phoneOk = (v) => digits(v).length === 10;
function fmtPhone(v) {
const d = digits(v).slice(0, 10);
if (d.length <= 3) return d;
if (d.length <= 6) return "(" + d.slice(0, 3) + ") " + d.slice(3);
return "(" + d.slice(0, 3) + ") " + d.slice(3, 6) + "-" + d.slice(6);
}
function fmtCard(v) {
const d = digits(v).slice(0, 16);
const parts = [];
for (let i = 0; i < d.length; i += 4) parts.push(d.slice(i, i + 4));
return parts.join(" ");
}
function fmtExp(v) {
const d = digits(v).slice(0, 4);
if (d.length <= 2) return d;
return d.slice(0, 2) + " / " + d.slice(2);
}
// ── ET scheduling helpers ───────────────────────────────────
// Next 5 business days (Mon–Fri), hourly slots 2:00–6:00 PM ET.
function buildDays() {
const now = new Date();
const nyNow = new Date(now.toLocaleString("en-US", { timeZone: "America/New_York" }));
const days = [];
let i = 1;
while (days.length < 5 && i < 14) {
const d = new Date(nyNow.getFullYear(), nyNow.getMonth(), nyNow.getDate() + i);
const dow = d.getDay();
if (dow !== 0 && dow !== 6) {
const slots = [];
for (let h = 14; h <= 18; h++) slots.push({ h });
days.push({ date: d, slots });
}
i++;
}
return days;
}
const fmtHour = (h) => (h === 12 ? "12:00 PM" : h < 12 ? h + ":00 AM" : (h - 12) + ":00 PM");
const fmtDay = (d) => d.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" });
// ── Small glyphs ────────────────────────────────────────────
const LblCheck = () => (
);
const GreenCheck = ({ size = 14 }) => (
);
const NoIncl = () => (
);
const LockGlyph = () => (
);
// Inline "?" help marker with hover/focus tooltip explaining why we ask.
function HelpTip({ text, children }) {
return (
?
{children || text}
);
}
// ── Progress bar (appears once you reach payment) ────────────
// flow + idx are computed by App so the call route can swap in "Scheduling".
// Completed segments fill fully; the current segment fills proportionally (fill 0–1).
// Earlier segments are clickable to navigate back.
function ProgressBar({ flow, idx, fill, prevFills = [], visible, onNav }) {
if (!visible) return null;
return (
{flow.map((label, i) => {
let scale = 0;
if (i < idx) {
// Previous segments default to fully filled, unless the parent
// says this segment was actually only partially completed (the
// visitor skipped ahead with the 'Pricing' shortcut).
const pf = prevFills[i];
scale = pf == null ? 1 : Math.min(1, Math.max(0, pf));
} else if (i === idx) {
scale = Math.min(1, Math.max(0.06, fill || 0));
}
const done = scale >= 1 && i < idx;
const now = i === idx || (i < idx && scale < 1);
// From the first step the 'Pricing' segment is a preview shortcut —
// let it be clickable too so visitors can peek before filling fields.
const canNav = !!onNav && (i < idx || (idx === 0 && i === 1));
return (
);
})}
);
}
function Field({ label, filled, full, hint, help, error, children }) {
return (
{children}
{hint ? {hint} : null}
);
}
// ── Step 1: business basics + number details (combined) ──────
function StepBasics({ data, set, onNext, onProgress }) {
const [attempted, setAttempted] = useState(false);
const [skipReveal, setSkipReveal] = useState(false);
const hoverTimer = useRef(null);
const okName = data.name.trim().length >= 2;
const okSite = siteOk(data.website);
const okEmail = emailOk(data.email);
const checks = [okName, okSite, okEmail];
const valid = checks.every(Boolean);
const filledCount = checks.filter(Boolean).length;
// Report fill ratio up so the progress bar's first segment fills as the
// user works through the fields.
useEffect(() => {
if (onProgress) onProgress(filledCount / checks.length);
}, [filledCount]);
const next = () => { if (valid) onNext(); else setAttempted(true); };
const err = (ok) => attempted && !ok;
// Hovering the Next button for 250ms morphs it into a "Skip to Pricing"
// shortcut. Click still advances (which lands on the pricing step).
const armSkip = () => {
clearTimeout(hoverTimer.current);
hoverTimer.current = setTimeout(() => setSkipReveal(true), 250);
};
const disarmSkip = () => {
clearTimeout(hoverTimer.current);
setSkipReveal(false);
};
useEffect(() => () => clearTimeout(hoverTimer.current), []);
return (
Complimentary, 1-on-1 onboarding to set you up for success
{plan === "lite" ? (
Dedicated local phone numberWithout a dedicated number, customers reach a shared EZText number. Their first text just needs to name your business — or the agent will simply ask which business they're trying to reach before it assists.Upgrade to a dedicated number anytime.
{payMethod === "card" ? (
{cardError ? {cardError} : null}
{attempted && !emailValid ? (
Add a valid email above so we can reach you.
) : null}
Payments secured by Stripe
) : (
{"Continue to Stripe to confirm " + (promo ? ("$" + firstMonthPrice + " today, then $" + price + "/month from month 2") : ("the $" + price + "/month subscription")) + " with Apple Pay. Cancel anytime."}
{attempted && !emailValid ? (
Add a valid email above so we can reach you.
) : null}
Apple Pay through Stripe
)}
) : (
Prefer a guided start? Book a quick call and our team will walk you through how EZText works and answer anything before you subscribe.
set("email", e.target.value)}
placeholder="you@yourbusiness.com" />
{needsEmail ? (
Add a valid email so we can reach you.
) : null}
No charge today — you only pay once you're ready.
Our team is securing your phone number and setting up your agent. We'll reach out shortly with next steps and our invoice.
);
}
// Fire-and-forget submission to the operator inbox.
function sendContact(payload) {
try {
fetch("/api/contact", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
keepalive: true,
}).catch(() => {});
} catch (e) {}
}
// ── App shell ───────────────────────────────────────────────
function App() {
const [step, setStep] = useState(0); // 0 business · 1 payment · 2 done
const [mode, setMode] = useState("pay");
const [basicsFill, setBasicsFill] = useState(0);
const [payFill, setPayFill] = useState(0);
const [data, setData] = useState({ name: "", website: "", email: "", phone: "", zip: "" });
const [contactSent, setContactSent] = useState(false);
const set = (k, v) => setData((d) => Object.assign({}, d, { [k]: v }));
const go = (s) => { setStep(s); window.scrollTo({ top: 0, behavior: "smooth" }); };
// Pre-fill from Biz Demo. When a prospect clicks the
// "Get your own EZText agent →" link from /, they land
// here with ?demo_name=... &demo_website=... — we know which
// business they were just chatting with, so type those values
// into the Business Name + Website fields on their behalf,
// letter-by-letter, so it's clear the form is being filled
// FOR them. They only need to add their email after that.
useEffect(() => {
const q = new URLSearchParams(window.location.search);
const demoName = (q.get("demo_name") || "").slice(0, 80);
const demoWebsite = (q.get("demo_website") || "").slice(0, 240);
if (!demoName && !demoWebsite) return;
let cancelled = false;
let timeouts = [];
async function typeInto(key, value) {
if (!value) return;
// ~22ms per character feels like fast typing without being instant.
for (let i = 1; i <= value.length; i += 1) {
if (cancelled) return;
const slice = value.slice(0, i);
set(key, slice);
await new Promise((r) => { const t = setTimeout(r, 22); timeouts.push(t); });
}
}
(async () => {
// Small delay so the form is mounted + the user sees the
// typing animation start, rather than the values appearing
// already-filled mid-page-load.
await new Promise((r) => { const t = setTimeout(r, 350); timeouts.push(t); });
await typeInto("name", demoName);
if (cancelled) return;
await new Promise((r) => { const t = setTimeout(r, 200); timeouts.push(t); });
await typeInto("website", demoWebsite);
})();
return () => { cancelled = true; timeouts.forEach(clearTimeout); };
}, []);
// Hide the 'Back to site' nav button throughout onboarding so the header
// stays clean. The in-card 'Back' button on the Pricing page is the only
// backwards-navigation affordance we want here. The wordmark still
// doubles as a link home.
useEffect(() => {
const back = document.getElementById("back-to-site");
if (back) back.style.display = "none";
}, [step]);
// Stripe sends the buyer back to this page with ?paid=1 + context
// (plan, promo, method, amount, session_id) on a successful checkout.
// Jump them straight to the celebration screen and notify the operator
// at noahmill465@gmail.com with everything we know about the customer.
// On ?canceled=1 stay on the pricing page (no action needed).
useEffect(() => {
const q = new URLSearchParams(window.location.search);
if (q.get("paid") === "1") {
setMode("pay");
setStep(2);
const planParam = q.get("plan") || "";
const priceParam = q.get("price") || (planParam === "premium" ? "200" : planParam === "standard" ? "100" : "");
const amountParam = q.get("amount") || priceParam;
const promoParam = q.get("promo") || "";
const methodParam = q.get("method") || "";
sendContact({
source: "onboarding-subscribed",
subject: "EZTEXT SUBSCRIPTION",
business: data.name,
website: data.website,
email: data.email,
plan: planParam,
promoCode: promoParam,
amountToday: amountParam ? "$" + amountParam : "",
recurring: priceParam ? "$" + priceParam + "/month" : "",
paymentMethod: methodParam,
sessionId: q.get("session_id") || "",
notes: "Stripe payment succeeded — confirm + provision the agent.",
});
// Strip the query string so a refresh doesn't re-fire the email.
window.history.replaceState({}, "", window.location.pathname);
}
}, []);
// True when every Business-page field is valid. Pricing actions gate on
// this so a visitor can't subscribe or schedule without filling it.
const basicsComplete =
data.name.trim().length >= 2 &&
siteOk(data.website) &&
emailOk(data.email);
const advanceFromBasics = () => {
if (!contactSent) {
sendContact({
source: "onboarding-business",
business: data.name,
website: data.website,
email: data.email,
phone: data.phone,
zip: data.zip,
});
setContactSent(true);
}
go(1);
};
const finishStep1 = (m) => {
// Re-send when they pick "call me" so the operator knows the path taken.
sendContact({
source: m === "call" ? "onboarding-call" : "onboarding-payment-intent",
business: data.name,
website: data.website,
email: data.email,
phone: data.phone,
zip: data.zip,
notes: m === "call" ? "Picked 'talk to the team' route" : "Submitted card details (front-end only)",
});
setMode(m);
go(2);
};
// Call route swaps "Pricing" for "Scheduling" once you're on the scheduling page.
const isCallDone = step === 2 && mode === "call";
const flow = isCallDone
? ["Business", "Scheduling", "Onboarding"]
: ["Business", "Pricing", "Onboarding"];
const idx = isCallDone ? 1 : step;
let fill = 0;
if (step === 0) fill = basicsFill;
else if (step === 1) fill = payFill;
else fill = mode === "pay" ? 1 : 0.5;
// Previous segments default to fully-done. If the visitor skipped the
// Business page by jumping ahead with 'Pricing', keep that segment at
// its actual partial fill instead of showing it as complete.
const prevFills = [basicsComplete ? 1 : basicsFill];
// From step 0 the 'Pricing' label is a preview shortcut — let them peek
// at pricing without first filling the form. The Next button still
// requires the fields, so they can't fully advance without them.
const onNav = (i) => {
if (i === 0) go(0);
else if (i === 1) go(1);
};
return (