);
}
// ─── Step 1: Business ───
function V1StepBusiness({ form, setForm, accent }) {
return (
Step 01 · Business
Tell us about your business.
Used to verify entity formation and file a KYB check. We don't hard-pull
business credit and we don't surface this to bureaus.
setForm({ ...form, businessName: v })} placeholder="La Rosa Restaurant LLC" accent={accent} />
setForm({ ...form, ein: v })} placeholder="12-3456789" accent={accent} />
setForm({ ...form, legalForm: v })} opts={['LLC', 'S-Corp', 'C-Corp', 'Sole Prop', 'Partnership']} accent={accent} />
setForm({ ...form, state: v })} opts={['CA','TX','FL','NY','IL','GA','WA','CO','AZ','NJ','Other']} accent={accent} />
setForm({ ...form, firstName: v })} placeholder="Maria" accent={accent} />
setForm({ ...form, lastName: v })} placeholder="Rodriguez" accent={accent} />
setForm({ ...form, email: v })} placeholder="you@business.com" accent={accent} />
setForm({ ...form, phone: v })} placeholder="(555) 555-0199" accent={accent} />
);
}
// ─── Step 2: Bank (Plaid) ───
function V1StepBank({ form, setForm, accent, onAdvance, autoOpen }) {
const [plaidOpen, setPlaidOpen] = React.useState(false);
// When the user lands on Bank via the email deep-link we kick Plaid Link
// open automatically — they've already committed once (clicked the
// email CTA), and the gap between "page loaded" and "first action" is
// where most apply-flow drop-off happens. Only fire when the bank isn't
// already connected (e.g. user is resuming a finished step) and only
// once per mount.
const autoOpenedRef = React.useRef(false);
React.useEffect(() => {
if (!autoOpen) return;
if (autoOpenedRef.current) return;
if (form.bankConnected) return;
autoOpenedRef.current = true;
// Defer one tick so the Bank step has actually painted before Plaid's
// popup steals focus — keeps the transition from looking jarring.
const t = setTimeout(() => setPlaidOpen(true), 350);
return () => clearTimeout(t);
}, [autoOpen, form.bankConnected]);
const handlePlaidSuccess = (data) => {
setPlaidOpen(false);
setForm({
...form,
bankConnected: true,
bankInstitution: data.institution,
bankAccounts: data.accounts,
});
setTimeout(() => { onAdvance && onAdvance(); }, 700);
};
return (
Step 02 · Connect
Link your deposits.{' '}
Read-only.
90 days of deposits via Plaid. We see balances, not credentials. No ACH
authorization yet — you revoke access anytime at my.plaid.com.
{/* State A — success */}
{form.bankConnected && (
No origination · No ACH · Early-pay rebate${daily.toLocaleString()} / day equiv.
By accepting, you agree to Delt's standard advance agreement. You'll
receive a signed PDF and a payment schedule by email within 60 seconds
of counter-signing.
Funds will hit your connected Chase account by 2:00 PM ET tomorrow.
Contract + amortization schedule are on the way to{' '}
{form.email || 'your email'}.
);
}
// ─── Main shell ───
function V1ApplicationFlow({
open, onClose, prefill, accent,
// New props: see app/variation-1.jsx for the wiring.
// • startStep — 0 (Business) by default; 1 (Bank) when arriving via
// the post-calculator email deep-link, because business
// + contact are already on file from the lead-gate.
// • autoOpenPlaid — when true, kicks Plaid Link open the instant the
// Bank step paints. Pairs with startStep=1.
// • onDraftChange — fires on each form mutation so the host can persist
// progress to localStorage and let users resume later.
// • onComplete — fires on the "Done" step so the host can clear the
// saved draft.
startStep = 0,
autoOpenPlaid = false,
onDraftChange,
onComplete,
}) {
const [step, setStep] = React.useState(startStep);
const [form, setForm] = React.useState({
// Contact fields are pre-filled from the calculator lead-gate when present
businessName: prefill?.lead?.businessName || '',
ein: '', legalForm: 'LLC',
firstName: prefill?.lead?.firstName || '',
lastName: '',
email: prefill?.lead?.email || '',
phone: prefill?.lead?.phone || '',
state: 'CA', useOfFunds: 'Inventory',
bankConnected: false, bankInstitution: '', bankAccounts: null,
ssn4: '', idVerified: false,
// Offer amount defaults to the *high end* of the calculator estimate
// so the slider starts where the email said the user pre-qualified.
// The previous default of 75000 was a regression — it threw away the
// estimate.high they were just shown.
amount: prefill?.high || 75000,
});
// If the modal is re-opened with a newer prefill (e.g. user re-runs the
// calculator and the lead-gate captures different contact info), merge
// those values in without clobbering anything the user has typed.
React.useEffect(() => {
if (!open || !prefill?.lead) return;
setForm((f) => ({
...f,
businessName: f.businessName || prefill.lead.businessName || '',
firstName: f.firstName || prefill.lead.firstName || '',
email: f.email || prefill.lead.email || '',
phone: f.phone || prefill.lead.phone || '',
amount: prefill.high || f.amount,
}));
}, [open, prefill]);
const [closing, setClosing] = React.useState(false);
React.useEffect(() => {
if (open) { setStep(startStep); setClosing(false); }
}, [open, startStep]);
// Persist every form mutation to the host (localStorage). We snapshot
// the bits that pre-fill on the next visit: contact, calculator inputs,
// and the in-progress bank/idv/amount state. Underwriting-sensitive
// values (e.g. accept-decision) are never persisted client-side.
React.useEffect(() => {
if (!open) return;
if (typeof onDraftChange !== 'function') return;
onDraftChange({
...(prefill || {}),
lead: {
firstName: form.firstName,
businessName: form.businessName,
email: form.email,
phone: form.phone,
},
// Carry the user's in-progress offer amount so a resume lands them
// on the slider position they had, not the prefill high.
pendingAmount: form.amount,
});
}, [open, form.firstName, form.businessName, form.email, form.phone, form.amount]);
// Fire onComplete when we reach the Done step (index 4). Used by the
// host to clear the saved draft — once the application is in, there's
// nothing left to resume.
React.useEffect(() => {
if (open && step >= 4 && typeof onComplete === 'function') onComplete();
}, [open, step]);
// ─── Apply-flow analytics beacon ───
// Fire fire-and-forget pings to /api/apply-progress as the user clears
// milestones. The beacon is keyed by prefill.leadId (set by the email
// deep link or the calculator lead-gate); without it the endpoint no-
// ops, so we never pin progress to an orphan row.
//
// Using a ref to track "already fired" so a re-render or a form-merge
// doesn't double-ping. We deliberately don't await — these are pure
// analytics and must never block UI transitions.
const beaconLeadId = prefill && prefill.leadId;
const beaconFiredRef = React.useRef({});
const fireBeacon = React.useCallback((event, meta) => {
if (!beaconLeadId) return;
if (beaconFiredRef.current[event]) return;
beaconFiredRef.current[event] = true;
try {
const body = JSON.stringify({ leadId: beaconLeadId, event, meta: meta || null });
// navigator.sendBeacon survives page unloads (the user closing the
// tab after submitting), but it only accepts Blob/FormData/string
// and ignores response codes. fetch keepalive is the modern
// equivalent and gives us actual feedback; pick whichever exists.
if (typeof navigator !== 'undefined' && navigator.sendBeacon) {
const blob = new Blob([body], { type: 'application/json' });
navigator.sendBeacon('/api/apply-progress', blob);
} else {
fetch('/api/apply-progress', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body, keepalive: true,
}).catch(() => {});
}
} catch (_) { /* analytics must never throw into the UI */ }
}, [beaconLeadId]);
// modal_opened — fire once per open per leadId. Reset the fired-state
// when the modal closes so re-opening (e.g. after a refresh) re-pings.
React.useEffect(() => {
if (!open) { beaconFiredRef.current = {}; return; }
fireBeacon('modal_opened', { fromEmail: !!(prefill && prefill.fromEmail) });
}, [open, fireBeacon]);
// plaid_connected — fire when Plaid Link returns success.
React.useEffect(() => {
if (!open) return;
if (form.bankConnected) {
fireBeacon('plaid_connected', { institution: form.bankInstitution || null });
}
}, [open, form.bankConnected, form.bankInstitution, fireBeacon]);
// idv_done — fire when IDV flips true.
React.useEffect(() => {
if (!open) return;
if (form.idVerified) fireBeacon('idv_done');
}, [open, form.idVerified, fireBeacon]);
// submitted — fire when the user lands on the Done step (which is
// gated on completing every prior step and clicking Accept offer).
React.useEffect(() => {
if (!open) return;
if (step >= 4) fireBeacon('submitted', { amount: form.amount });
}, [open, step, form.amount, fireBeacon]);
// Prevent body scroll while open
React.useEffect(() => {
if (!open) return;
const prev = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => { document.body.style.overflow = prev; };
}, [open]);
if (!open && !closing) return null;
const handleClose = () => {
setClosing(true);
setTimeout(() => { setClosing(false); onClose(); }, 200);
};
const canProceed = (() => {
if (step === 0) return form.businessName && form.email;
if (step === 1) return form.bankConnected;
if (step === 2) return form.ssn4.length === 4 && form.idVerified;
return true;
})();
const modal = (