// cal-apply.jsx — Multi-step apply flow with 3/4/5 step density variants
const { useState: aUS, useEffect: aUE, useMemo: aUM, useRef: aUR } = React;
// ─────────────────────────────────────────────────────────────
// Form state hook — persists to localStorage
// ─────────────────────────────────────────────────────────────
const LS_KEY = "cal_apply_v1";
const SEED_KEY = "cal_apply_seed";
const STEP_KEY = "cal_apply_step";
const EMPTY = {
// Contact
first: "", last: "", phone: "", email: "", dob: "", postal: "",
// Vehicle
vehiclePrice: "", buyTiming: "", vehicleType: "",
// Employment
empStatus: "", empLength: "", monthlyIncome: "", employer: "",
// Credit
creditScore: "", bankruptcy: "", cosigner: "", tradeIn: "",
// Consent — granular, both required for submission per PIPEDA
creditConsent: false,
contactConsent: false,
};
// Consent text versioning — bump this string whenever the consent wording changes.
// Captured at submission time alongside timestamp + user agent + IP (server-side).
const CONSENT_VERSION = "v2.1-2026-06-02";
const CONSENT_TEXT = {
credit: "I authorize Canadian Auto Loan to obtain my credit report from Equifax Canada and TransUnion Canada for the purpose of matching me with lender(s) for vehicle financing. I understand the credit check is performed only after Canadian Auto Loan has spoken with me and I have given verbal approval to proceed, and that I may withdraw this consent at any time before the check is performed by emailing info@canadianautoloan.net.",
contact: "I agree to be contacted by Canadian Auto Loan by phone, email, or text message about my application. I understand I may withdraw this consent at any time by emailing info@canadianautoloan.net.",
};
function useApplyState() {
const [data, setData] = aUS(() => {
try {
const raw = localStorage.getItem(LS_KEY);
const seed = localStorage.getItem(SEED_KEY);
const base = { ...EMPTY, ...(raw ? JSON.parse(raw) : {}) };
if (seed) {
const s = JSON.parse(seed);
// mini-app hero seed
if (s.first) base.first = base.first || s.first;
if (s.last) base.last = base.last || s.last;
if (s.postal) base.postal = base.postal || s.postal;
// quiz seed
if (s.credit) base.creditScore = base.creditScore || mapQuizCredit(s.credit);
if (s.income) base.monthlyIncome = base.monthlyIncome || s.income;
if (s.purpose) base.buyTiming = base.buyTiming || s.purpose;
localStorage.removeItem(SEED_KEY);
}
return base;
} catch { return EMPTY; }
});
aUE(() => {
try { localStorage.setItem(LS_KEY, JSON.stringify(data)); } catch (_) {}
}, [data]);
const update = (patch) => setData((d) => ({ ...d, ...patch }));
const reset = () => {
setData(EMPTY);
try {
localStorage.removeItem(LS_KEY);
localStorage.removeItem(STEP_KEY);
localStorage.removeItem("cal_apply_submission_v1");
} catch (_) {}
};
return [data, update, reset];
}
function mapQuizCredit(q) {
return ({excellent:"excellent",good:"good",fair:"fair",building:"building",wip:"wip",idk:""})[q] || "";
}
// ─────────────────────────────────────────────────────────────
// Validators per step. Return {} if valid, {fieldKey: errorMsg} if not.
// ─────────────────────────────────────────────────────────────
const CA_POSTAL_RE = /^[A-CEGHJ-NPRSTVXYa-ceghj-npr-tvxy]\d[A-Za-z][\s-]?\d[A-Za-z]\d$/;
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
function validateContact(d) {
const e = {};
if (!d.first?.trim()) e.first = "Please enter your first name.";
if (!d.last?.trim()) e.last = "Please enter your last name.";
if (!d.phone?.trim()) e.phone = "Please enter a phone number we can reach you at.";
else {
const digits = d.phone.replace(/\D/g, "");
if (digits.length < 10 || digits.length > 11) {
e.phone = "Please enter a 10-digit Canadian phone number.";
}
}
if (!d.email?.trim()) e.email = "Please enter your email address.";
else if (!EMAIL_RE.test(d.email.trim())) e.email = "That doesn't look like a valid email address.";
if (!d.dob?.trim()) e.dob = "Please enter your date of birth.";
else {
const m = d.dob.match(/^(\d{4})-(\d{2})-(\d{2})$/);
if (!m) e.dob = "Use a real date (yyyy-mm-dd).";
else {
const [, ys, ms, ds] = m;
const y = +ys, mo = +ms, da = +ds;
const date = new Date(y, mo - 1, da);
if (date.getFullYear() !== y || date.getMonth() !== mo - 1 || date.getDate() !== da) {
e.dob = "That date doesn't exist. Double-check the day and month.";
} else {
const now = new Date();
let age = now.getFullYear() - y;
const beforeBirthday = now.getMonth() < mo - 1 || (now.getMonth() === mo - 1 && now.getDate() < da);
if (beforeBirthday) age--;
if (date > now) e.dob = "Date of birth can't be in the future.";
else if (age < 18) e.dob = "You must be 18 or older to apply.";
else if (age > 110) e.dob = "That doesn't look right — please re-check.";
}
}
}
if (!d.postal?.trim()) e.postal = "Please enter your postal code.";
else if (!CA_POSTAL_RE.test(d.postal.trim())) {
e.postal = "Use a Canadian postal code, e.g. K1Z 7S8.";
}
return e;
}
function validateVehicle(d) {
const e = {};
if (!d.vehiclePrice) e.vehiclePrice = "Please pick a price range.";
if (!d.buyTiming) e.buyTiming = "Please pick a timeline.";
return e;
}
function validateEmployment(d) {
const e = {};
if (!d.empStatus) e.empStatus = "Please pick your current employment status.";
if (!d.empLength) e.empLength = "Please pick how long you've been employed.";
if (!d.monthlyIncome) e.monthlyIncome = "Please pick a monthly income range.";
return e;
}
function validateCredit(d) {
const e = {};
if (!d.creditScore) e.creditScore = "Please pick your best-guess credit range.";
if (!d.bankruptcy) e.bankruptcy = "Please answer the bankruptcy question.";
return e;
}
function validateConsent(d) {
const e = {};
if (!d.creditConsent) e.creditConsent = "Please authorize the credit check to continue.";
if (!d.contactConsent) e.contactConsent = "Please authorize contact to continue.";
return e;
}
function validateStep(stepKey, d) {
switch (stepKey) {
case "contact": return validateContact(d);
case "vehicle": return validateVehicle(d);
case "employment": return validateEmployment(d);
case "credit": return validateCredit(d);
case "money": return { ...validateEmployment(d), ...validateCredit(d) };
case "loan": return { ...validateVehicle(d), ...validateEmployment(d), ...validateCredit(d) };
case "consent": return validateConsent(d);
default: return {};
}
}
// ─────────────────────────────────────────────────────────────
// CalDatePicker — branded date picker. Value is "yyyy-mm-dd" string.
// Trigger renders as a CalSelect-style button; popover has a year+month
// header (with quick year-decade jump for DOB use case), weekday row,
// and a 6-row day grid. min/max enforce bounds.
// ─────────────────────────────────────────────────────────────
const MONTHS = ["January","February","March","April","May","June","July","August","September","October","November","December"];
const WEEKDAYS = ["S","M","T","W","T","F","S"];
function parseISODate(s) {
if (!s) return null;
const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
if (!m) return null;
const d = new Date(+m[1], +m[2] - 1, +m[3]);
if (d.getFullYear() !== +m[1] || d.getMonth() !== +m[2] - 1 || d.getDate() !== +m[3]) return null;
return d;
}
function toISO(d) {
const y = d.getFullYear();
const m = String(d.getMonth() + 1).padStart(2, "0");
const da = String(d.getDate()).padStart(2, "0");
return `${y}-${m}-${da}`;
}
function fmtLong(d) {
return d.toLocaleDateString("en-CA", { year: "numeric", month: "long", day: "numeric" });
}
function CalDatePicker({ value, onChange, min, max, placeholder = "Select date" }) {
const minDate = aUM(() => parseISODate(min), [min]);
const maxDate = aUM(() => parseISODate(max), [max]);
const selected = aUM(() => parseISODate(value), [value]);
const [open, setOpen] = aUS(false);
// What month/year the calendar is currently showing
const initView = selected || maxDate || new Date();
const [viewYear, setViewYear] = aUS(initView.getFullYear());
const [viewMonth, setViewMonth] = aUS(initView.getMonth());
const [yearPick, setYearPick] = aUS(false);
const [drop, setDrop] = aUS("down"); // "up" | "down" — direction the popover opens
const rootRef = aUR(null);
const btnRef = aUR(null);
// When opening, snap view to the current selection (or max if no selection)
aUE(() => {
if (open) {
const view = selected || maxDate || new Date();
setViewYear(view.getFullYear());
setViewMonth(view.getMonth());
setYearPick(false);
// Decide direction: open upward if not enough room below.
const POP_H = 380;
const r = btnRef.current?.getBoundingClientRect();
if (r) {
const spaceBelow = window.innerHeight - r.bottom;
const spaceAbove = r.top;
setDrop(spaceBelow < POP_H && spaceAbove > spaceBelow ? "up" : "down");
}
}
}, [open]);
// Outside click + Esc to close
aUE(() => {
if (!open) return;
const onDoc = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false); };
const onKey = (e) => { if (e.key === "Escape") { setOpen(false); btnRef.current?.focus(); } };
document.addEventListener("mousedown", onDoc);
document.addEventListener("keydown", onKey);
return () => {
document.removeEventListener("mousedown", onDoc);
document.removeEventListener("keydown", onKey);
};
}, [open]);
// Build the day grid for viewYear/viewMonth
const grid = aUM(() => {
const first = new Date(viewYear, viewMonth, 1);
const startDay = first.getDay(); // 0 = Sunday
const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
const cells = [];
// Lead-in from previous month
for (let i = 0; i < startDay; i++) {
const d = new Date(viewYear, viewMonth, -(startDay - 1 - i));
cells.push({ date: d, inMonth: false });
}
for (let i = 1; i <= daysInMonth; i++) {
cells.push({ date: new Date(viewYear, viewMonth, i), inMonth: true });
}
// Tail-out to fill 6 rows (42 cells)
while (cells.length < 42) {
const last = cells[cells.length - 1].date;
cells.push({ date: new Date(last.getFullYear(), last.getMonth(), last.getDate() + 1), inMonth: false });
}
return cells;
}, [viewYear, viewMonth]);
const isDisabled = (d) => {
if (minDate && d < minDate) return true;
if (maxDate && d > maxDate) return true;
return false;
};
const isSameDay = (a, b) => a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
const today = new Date();
const stepMonth = (delta) => {
let y = viewYear, m = viewMonth + delta;
if (m < 0) { m = 11; y--; }
if (m > 11) { m = 0; y++; }
setViewYear(y); setViewMonth(m);
};
// Years to show in the year-pick grid: 12 around current view, clamped to min/max
const yearGrid = aUM(() => {
const start = Math.floor(viewYear / 12) * 12;
return Array.from({ length: 12 }, (_, i) => start + i);
}, [viewYear]);
const yearAllowed = (y) => {
if (minDate && y < minDate.getFullYear()) return false;
if (maxDate && y > maxDate.getFullYear()) return false;
return true;
};
return (
Both authorizations required to submit your application
To process your application, we need two authorizations: one to run a credit check,
and one to contact you about your file. You can withdraw either at any time.
{explainerOpen && (
A credit check lets our lenders see your credit history and current standing so
they can decide what financing they can offer you. We run it through{" "}
Equifax Canada and TransUnion Canada.
We only run the check after we've spoken with you and you've given approval to proceed.
It's used solely to match you with a lender for vehicle financing.
Your information is shared only with the lender(s) reviewing your application — never marketing partners.
)}
For audit purposes, we record the date & time, IP address,{" "}
browser information, and the exact consent text version shown to you
when you submit. {CONSENT_VERSION}
);
}
// ─────────────────────────────────────────────────────────────
// Main Apply flow
// ─────────────────────────────────────────────────────────────
function Apply({ density = 5 }) {
const { path, go } = useRoute();
const [data, update, reset] = useApplyState();
const steps = getSteps(density);
// Current step key from URL: /apply/
const m = path.match(/^\/apply\/?(.*)$/);
const curKey = m ? m[1] : "";
// If no step key, resume where the user left off (or go to first step).
aUE(() => {
if (curKey === "") {
let resume = "";
try { resume = localStorage.getItem(STEP_KEY) || ""; } catch (_) {}
// Only resume to a step that exists in the current density's flow.
const valid = resume && steps.some(s => s.key === resume) && resume !== "done";
go(`/apply/${valid ? resume : steps[0].key}`);
}
}, [curKey, density]);
// Persist the latest visited step so click-out / click-back resumes here.
aUE(() => {
if (!curKey || curKey === "done") return;
if (!steps.some(s => s.key === curKey)) return;
try { localStorage.setItem(STEP_KEY, curKey); } catch (_) {}
}, [curKey]);
// Done state
if (curKey === "done") {
return ;
}
// While we're about to redirect, render nothing — avoids flicker
if (curKey === "") {
return null;
}
const curIdx = Math.max(0, steps.findIndex(s => s.key === curKey));
const step = steps[curIdx];
if (!step) {
// Unknown step → bounce to first
go(`/apply/${steps[0].key}`);
return null;
}
// Validation state. Errors only populate after the user clicks Continue once;
// then they auto-clear field-by-field as the user fixes them.
const [attempted, setAttempted] = aUS(false);
const errors = aUM(() => attempted ? validateStep(step?.key, data) : {}, [attempted, step?.key, data]);
// Reset attempted state when navigating between steps.
aUE(() => { setAttempted(false); }, [curKey]);
// Submission state. `submitting` blocks the Submit button while POST is in
// flight; `submitError` surfaces a retry banner on failure.
const [submitting, setSubmitting] = aUS(false);
const [submitError, setSubmitError] = aUS(null);
const scrollToFirstError = (errs) => {
const firstKey = Object.keys(errs)[0];
if (!firstKey) return;
requestAnimationFrame(() => {
const el = document.querySelector(`[data-field="${firstKey}"]`);
if (!el) return;
const rect = el.getBoundingClientRect();
const stickyTop = (document.querySelector('.apply-header')?.getBoundingClientRect().bottom || 0);
const offset = window.scrollY + rect.top - stickyTop - 16;
window.scrollTo({ top: Math.max(0, offset), behavior: "smooth" });
// Focus the offending control for keyboard users
const focusable = el.querySelector('input, button, select, [tabindex]');
if (focusable && typeof focusable.focus === "function") {
setTimeout(() => focusable.focus({ preventScroll: true }), 400);
}
});
};
const goStep = (i) => go(`/apply/${steps[Math.max(0, Math.min(steps.length-1, i))].key}`);
const next = async () => {
if (submitting) return;
const errs = validateStep(step.key, data);
if (Object.keys(errs).length > 0) {
setAttempted(true);
scrollToFirstError(errs);
return;
}
if (curIdx !== steps.length - 1) {
goStep(curIdx + 1);
return;
}
// Final step — build submission payload and POST to the application intake
// endpoint. The endpoint forwards the lead to BKD via email; the consent
// audit record travels inside the payload. Client IP is captured server-side.
const submission = {
submittedAt: new Date().toISOString(),
consentVersion: CONSENT_VERSION,
creditConsent: {
accepted: data.creditConsent,
text: CONSENT_TEXT.credit,
},
contactConsent: {
accepted: data.contactConsent,
text: CONSENT_TEXT.contact,
},
clientMetadata: {
userAgent: navigator.userAgent,
language: navigator.language,
languages: Array.isArray(navigator.languages) ? navigator.languages.slice(0, 4) : [],
platform: navigator.platform,
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
timezoneOffsetMinutes: new Date().getTimezoneOffset(),
screen: `${window.screen?.width || 0}×${window.screen?.height || 0} @${window.devicePixelRatio || 1}x`,
viewport: `${window.innerWidth}×${window.innerHeight}`,
referrer: document.referrer || "(direct)",
// ipAddress: captured server-side at submission endpoint.
},
application: { ...data },
};
setSubmitting(true);
setSubmitError(null);
try {
const ctrl = new AbortController();
const timeoutId = setTimeout(() => ctrl.abort(), 15000);
const res = await fetch("/api/submit-application", {
method: "POST",
headers: { "Content-Type": "application/json", "Accept": "application/json" },
body: JSON.stringify(submission),
signal: ctrl.signal,
});
clearTimeout(timeoutId);
const body = await res.json().catch(() => ({ ok: false, error: "invalid_response" }));
if (!res.ok || !body.ok) {
const detail = body?.error || `http_${res.status}`;
setSubmitting(false);
setSubmitError(detail);
return;
}
// Server-confirmed submission: store the audit record with the server ID,
// navigate to the success page. Form draft is left in place until the
// ApplySubmitted screen clears it.
const stored = { ...submission, submissionId: body.submissionId, emailId: body.emailId };
try {
localStorage.setItem("cal_apply_submission_v1", JSON.stringify(stored));
} catch (_) {}
setSubmitting(false);
go("/apply/done");
} catch (err) {
setSubmitting(false);
setSubmitError(err?.name === "AbortError" ? "timeout" : "network");
}
};
const back = () => goStep(curIdx - 1);
const errorCount = Object.keys(errors).length;
return (
{errorCount > 0 && (
{errorCount === 1 ? "One thing needs your attention" : `${errorCount} things need your attention`} · We've highlighted what's missing or needs fixing below.
)}
{submitError && (
We couldn't submit your application. · {submitError === "timeout" ? "The request timed out." : submitError === "network" ? "Check your connection and try again." : "Something went wrong on our end."} You can retry now, or call us at (613) 700-8641. Your information has been saved locally so you won't lose it.
Step {curIdx+1} of {steps.length}· {steps[curIdx]?.label}
Saved
{steps.map((s, i) => (
{s.label}
))}
);
}
function ApplyStepHeader({ step, curIdx, total }) {
const titles = {
contact: ["Let's start with how to reach you.", "We use this to contact you about your application — never for marketing."],
vehicle: ["Tell us about the vehicle.", "We'll match financing to the price range you're aiming for."],
employment: ["Income & employment.", "Lenders look at your overall stability, not just a credit number."],
credit: ["Your credit picture.", "Be honest — we work with every credit profile."],
money: ["Income, employment & credit.", "Lenders look at your overall stability, not just a credit number."],
loan: ["About your loan.", "Vehicle, income and credit picture in one place."],
consent: ["Review & authorize.", "Almost done. Make sure everything looks right, then provide both consents to submit your application."],
};
const [t, sub] = titles[step.key] || ["Continue", ""];
return (
A real human will review your file within 24 hours. We'll text and email
you with what comes next — usually a quick call to confirm a few details
before we shop the network.
Back to home
What happens next
{[
["Within 24 hours", "Ecaterina or another sales lead reviews your file and pings you with any questions."],
["1–3 business days", "We match you with lenders in our network and bring back the best rate available for your profile."],
["After pre-approval", "Pick a vehicle from our partner inventory. We arrange door-to-door delivery anywhere in Ontario or Quebec."],
].map(([when, what], i) => (