/* flow1.jsx — onboarding primitives + Welcome · Verify-intro · Plaid IDV · Success.
Built on the latest mobile app's atoms (Icon, Btn, Money, Eyebrow, Seam, Logo). */
/* =============================================================
PRIMITIVES — onboarding-specific, in the app's vocabulary
============================================================= */
/* Screen scaffold: a flex column that fills the bezel.
Body scrolls; Dock pins to the bottom. */
const Screen = ({ children, style }) => (
{children}
);
const Body = ({ children, style }) => {
const web = usePlatform() === "web";
return
{children}
;
};
/* On web the dock is not pinned to the bottom — it flows right under the
content (left-aligned, auto-width button). On mobile it stays pinned. */
const Dock = ({ children, style }) => {
const web = usePlatform() === "web";
return
{children}
;
};
const H = ({ children, size = 32 }) => (
{children}
);
/* Line break that collapses to a space on web (wider canvas → one line). */
const Brk = () => (usePlatform() === "web" ? " " : );
const Sub = ({ children, style }) => {
const web = usePlatform() === "web";
return (
);
};
/* SMS code — 6 boxes, auto-fills then resolves */
const PlaidCode = ({ phone, onDone }) => {
const [code, setCode] = useState("");
const tail = (phone || "").replace(/\D/g, "").slice(-4) || "0142";
useEffect(() => {
// auto-arrive the texted code, char by char, then continue
let i = 0; const seq = "418205";
const iv = setInterval(() => { i++; setCode(seq.slice(0, i)); if (i >= 6) { clearInterval(iv); setTimeout(onDone, 650); } }, 320);
return () => clearInterval(iv);
}, []);
return (
<>
Enter the codeWe texted a 6-digit code to +1 ••• ••• {tail}.
{Array.from({ length: 6 }).map((_, i) => {
const ch = code[i];
const active = i === code.length;
return (
{ch || ""}
);
})}
Waiting for your text…
);
};
/* Liveness — scan ID, then selfie. A schematic camera sequence that resolves.
With `fail`, the first match comes back inconclusive; the user gets one
retry, and if it's still no match we hand off to manual review (`onFail`). */
const PlaidLiveness = ({ onDone, fail, onFail }) => {
const [phase, setPhase] = useState(0); // 0 id, 1 selfie, 2 done, 3 no-match
const [attempt, setAttempt] = useState(0);
const timers = useRef([]);
const clearTimers = () => { timers.current.forEach(clearTimeout); timers.current = []; };
const run = () => {
clearTimers();
setPhase(0);
timers.current.push(setTimeout(() => setPhase(1), 2100));
timers.current.push(setTimeout(() => setPhase(fail ? 3 : 2), 4200));
if (!fail) timers.current.push(setTimeout(() => onDone && onDone(), 5300));
};
useEffect(() => { run(); return clearTimers; }, []);
// a second inconclusive attempt routes to a human
useEffect(() => {
if (phase === 3 && attempt >= 1) {
const t = setTimeout(() => onFail && onFail(), 2500);
return () => clearTimeout(t);
}
}, [phase, attempt]);
const retry = () => { setAttempt((a) => a + 1); run(); };
const isSelfie = phase === 1;
const done = phase === 2;
const noMatch = phase === 3;
if (noMatch) {
const firstTry = attempt === 0;
return (
<>
{firstTry ? "That didn't scan cleanly" : "We still couldn't confirm a match"}{firstTry
? "Your selfie didn't clearly match your ID. Let's try once more. Good lighting and holding steady help."
: "We tried twice and still couldn't get a clear match. We'll hand this to a specialist to check by hand and return you to Yoshi."}
{["Reading ID", "Selfie", "No match"].map((l, i) => {
const bad = i === 2;
return (
{l}
);
})}
{firstTry ? (
Try again
Attempt 1 of 2
) : (
Sending to a specialist…
)}
);
}
return (
<>
{done ? "Identity confirmed" : isSelfie ? "Now a quick selfie" : "Scan your ID"}{done ? "You're verified. Returning you to Yoshi." : isSelfie ? "Look at the camera and hold still." : "Position the front of your ID inside the frame."}