// Apple Bank × Liquid Data — Consumer journey host
// Mobile-first. On desktop, the same mobile app is centered inside a phone frame
// against a navy editorial backdrop (chase.liquiddata.com style).
const { useState: _juseState, useEffect: _juseEffect } = React;
// ───── Supabase config (anon publishable key, RLS INSERT-only) ─────
const SUPABASE_URL = 'https://ywyjahvvoqkgrdceayuf.supabase.co';
const SUPABASE_KEY = 'sb_publishable_OHNLGFSV0Vs4Gata4TQTog_XYrrbdwJ';
const SUPABASE_TABLE = 'apple_bank_responses';
// ───── Capture context — fires once on first load ─────
const CAPTURE_CTX = (() => {
if (typeof window === 'undefined') return {};
const p = new URLSearchParams(window.location.search);
return {
user_agent: navigator.userAgent,
device_type: /Mobi|Android/i.test(navigator.userAgent) ? 'mobile' : 'desktop',
referrer: document.referrer || null,
utm_source: p.get('utm_source') || p.get('src'),
utm_medium: p.get('utm_medium'),
utm_campaign: p.get('utm_campaign'),
can_id: p.get('can') || p.get('c'),
scan_timestamp: new Date().toISOString(),
};
})();
// Geo — fires on first user interaction (S1 "Let's go"), persisted to module scope
let GEO_CACHE = { geo_lat: null, geo_lng: null, geo_borough: null };
function captureGeo() {
if (typeof navigator === 'undefined' || !navigator.geolocation) return;
if (GEO_CACHE.geo_lat != null) return; // already captured
navigator.geolocation.getCurrentPosition(
(pos) => {
GEO_CACHE.geo_lat = pos.coords.latitude;
GEO_CACHE.geo_lng = pos.coords.longitude;
GEO_CACHE.geo_borough = inferBorough(pos.coords.latitude, pos.coords.longitude);
},
() => {},
{ timeout: 8000, maximumAge: 60000 }
);
}
function inferBorough(lat, lon) {
if (lat == null) return null;
if (lat > 40.78 && lat < 40.88 && lon > -74.02 && lon < -73.91) return 'Manhattan (uptown)';
if (lat > 40.70 && lat < 40.78 && lon > -74.02 && lon < -73.93) return 'Manhattan';
if (lat > 40.57 && lat < 40.74 && lon > -74.04 && lon < -73.83) return 'Brooklyn';
if (lat > 40.54 && lat < 40.80 && lon > -73.96 && lon < -73.70) return 'Queens';
if (lat > 40.79 && lat < 40.92 && lon > -73.93 && lon < -73.75) return 'Bronx';
if (lat > 40.50 && lat < 40.65 && lon > -74.26 && lon < -74.05) return 'Staten Island';
if (lat > 40.55 && lat < 41.20 && lon > -73.70 && lon < -71.85) return 'Long Island';
if (lat > 40.90 && lat < 41.40 && lon > -74.10 && lon < -73.45) return 'Westchester';
if (lat > 40.50 && lat < 41.30 && lon > -75.00 && lon < -73.90) return 'NJ commute';
return 'Outside NYC area';
}
// POST to Supabase. Anon key is safe to expose — RLS allows INSERT only.
function submitToSupabase(state, opts = {}) {
const path = state.path === 'parent' ? 'parent' : 'student';
const body = {
path,
first_name: state.firstName || null,
last_name: state.lastName || null,
kid_first_name: state.kidFirstName || null,
phone: state.phone || null,
email: state.email || null,
school: state.school || null,
year: state.year || null,
major: state.major || null,
grade: state.grade || null,
age_band: state.ageBand || null,
family_count: state.familyCount || null,
has_529: state.has529 || null,
timing: state.timing || null,
banks: state.banks && state.banks.length ? state.banks : null,
usage: state.usage || null,
deposit: state.deposit || null,
geo_lat: GEO_CACHE.geo_lat,
geo_lng: GEO_CACHE.geo_lng,
geo_borough: GEO_CACHE.geo_borough,
completed: !!opts.completed,
screens_completed: opts.screens_completed || 0,
...CAPTURE_CTX,
};
return fetch(`${SUPABASE_URL}/rest/v1/${SUPABASE_TABLE}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
apikey: SUPABASE_KEY,
Authorization: `Bearer ${SUPABASE_KEY}`,
Prefer: 'return=minimal',
},
body: JSON.stringify(body),
}).catch((e) => {
if (typeof console !== 'undefined') console.warn('[apple-bank] submit failed', e);
});
}
const INITIAL_STATE = {
path: null,
firstName: '', lastName: '', kidFirstName: '',
school: null, year: null, major: '',
banks: [], usage: null,
grade: null, ageBand: null, familyCount: null, has529: null,
phone: '', email: '', deposit: null, timing: null,
};
const PHONE_W = 390;
const PHONE_H = 844;
const DESKTOP_BP = 900; // ≥ this → show phone-frame against backdrop
function useBreakpoint() {
const [bp, setBp] = _juseState(() => {
if (typeof window === 'undefined') return 'mobile';
return window.innerWidth >= DESKTOP_BP ? 'desktop' : 'mobile';
});
_juseEffect(() => {
const onResize = () => setBp(window.innerWidth >= DESKTOP_BP ? 'desktop' : 'mobile');
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, []);
return bp;
}
function JourneyApp() {
const [screen, setScreen] = _juseState('S1');
const [history, setHistory] = _juseState(['S1']);
const [state, setState] = _juseState(INITIAL_STATE);
const bp = useBreakpoint();
function set(k, v) { setState(s => ({ ...s, [k]: v })); }
function next(t) {
// Capture geo on first forward move from S1
if (screen === 'S1' && t !== 'S1') captureGeo();
// Submit on entering a confirmation screen (S8 student, P8 parent)
if (t === 'S8' || t === 'P8') {
submitToSupabase(state, { completed: true, screens_completed: history.length + 1 });
}
setScreen(t);
setHistory(h => [...h, t]);
}
function back() {
setHistory(h => {
if (h.length <= 1) return h;
const nh = h.slice(0, -1);
setScreen(nh[nh.length - 1]);
return nh;
});
}
function jump(t) {
setScreen(t);
setHistory([t]);
if (t === 'S1') setState(INITIAL_STATE);
}
const ScreenComp = AB_SCREENS[screen];
const showBack = screen !== 'S1' && screen !== 'S8' && screen !== 'P8';
const mobileApp = (
);
if (bp === 'desktop') {
return {mobileApp};
}
return mobileApp;
}
/* ─────────── MOBILE APP ───────────
The actual journey. Looks/feels like a native mobile app — no phone bezel,
no status bar mock. On mobile: fills viewport. On desktop: sized 390×844
inside the DesktopFrame (which sets the container size). */
function MobileApp({ screen, state, set, next, back, jump, ScreenComp, showBack }) {
return (
{/* Status bar — real on iOS via safe-area, mock on desktop phone frame */}
{/* Brand bar */}
{showBack ? (
) : (
)}
Apple Bank
× Liquid Data
{/* Screen surface */}
);
}
/* ─────────── DESKTOP FRAME ───────────
On wide screens we wrap the mobile app in a phone bezel against a
navy editorial backdrop. Same approach as chase.liquiddata.com. */
function DesktopFrame({ screen, children }) {
return (
{/* ambient backdrop */}
{/* layout: left editorial, right phone */}
{/* Editorial column */}
{/* Phone frame */}
{/* speaker notch */}
{children}
{/* corner brand */}
Apple Bank× Liquid Data
Apple Bank for Savings · NMLS #586470 · FDIC insured · Est. 1863, New York
);
}
/* ─────────── DESKTOP EDITORIAL ───────────
Static editorial copy + dancing can to the left of the phone.
Doesn't change per screen — keeps the desktop feel calm. */
function DesktopEditorial() {
return (
Scan the can · 90 second journey
Apple Bank has been Good For New York since 1863.
162 years. 80 neighborhood branches. Bankers who live in the same area as our branches — your neighbors. Now we’re paying you to come say hi. Try it →
);
}
function DStat({ n, l }) {
return (
{n}
{l}
);
}
/* ─────────── STATUS BAR ───────────
Mock iOS-style status bar. On real iOS the OS overlays its own; this gives the
page a clean 48px gutter at the top that works on desktop (under the notch)
and mobile (under the safe-area inset). */
function PhoneStatusBar() {
return (
9:41
{/* signal */}
{/* wifi */}
{/* battery */}
);
}
/* ─────────── BACKDROP ART ───────────
Subtle decorative apple icon + sparkles behind the phone. */
function BackdropArt() {
return (
<>
{/* big faint apple silhouette */}