/* Onboarding — a first-run journey: user role → goals → connect accounts → set up brand (brief, voice, assets) → invite others → choose a starting point (plan posts/campaigns or audit performance). Shown until completed; can be re-run from Settings. All simulated/local. Exposed as window.Onboarding. */ (function () { const S = window.CroprStore; const D = window.CROPR_DATA; const fieldStyle = { width: "100%", boxSizing: "border-box", fontFamily: "inherit", fontSize: 14, color: "var(--fg1)", background: "var(--surface)", border: "1px solid var(--border-strong)", borderRadius: 10, padding: "10px 12px", outline: "none" }; const Label = ({ children }) => {children}; const readFile = async (f, cb) => { if (!f) return; const m = await window.LeapUpload.readAndHost(f); if (m) cb(m); }; // a big selectable option card (icon + label + desc), single or multi function OptionCard({ on, icon, label, desc, onClick }) { return ( ); } function Onboarding({ onDone, onToast }) { const ob = S.getOnboarding(); const [step, setStep] = React.useState(0); const [role, setRole] = React.useState(ob.role || null); const [goals, setGoals] = React.useState(ob.goals || []); const [connected, setConnected] = React.useState(ob.connected || []); const [brief, setBrief] = React.useState(S.getBrand().brandBrief || ""); const [voice, setVoice] = React.useState(S.getBrand().brandVoice || ""); const [assetCount, setAssetCount] = React.useState(0); const [invRole, setInvRole] = React.useState("creator"); const [invEmail, setInvEmail] = React.useState(""); const [invited, setInvited] = React.useState([]); // agency client setup (loop) const [clName, setClName] = React.useState(""); const [clBrief, setClBrief] = React.useState(""); const [clVoice, setClVoice] = React.useState(""); const [clAssets, setClAssets] = React.useState([]); const [createdClients, setCreatedClients] = React.useState([]); const isAgency = role === "agency"; // step keys differ for agencies (per-client setup instead of one brand + invite) const STEP_KEYS = isAgency ? ["role", "goals", "connect", "clients", "finish"] : ["role", "goals", "connect", "brand", "invite", "finish"]; const STEP_LABELS = { role: "Role", goals: "Goals", connect: "Connect", brand: "Brand", invite: "Invite", clients: "Clients", finish: "Start" }; const key = STEP_KEYS[Math.min(step, STEP_KEYS.length - 1)]; const lastStep = STEP_KEYS.length - 1; const toggleGoal = (id) => setGoals((g) => g.includes(id) ? g.filter((x) => x !== id) : [...g, id]); const toggleConn = (id) => setConnected((c) => c.includes(id) ? c.filter((x) => x !== id) : [...c, id]); const roleOpts = S.getRoles().filter((r) => r.id !== "admin").map((r) => ({ value: r.id, label: r.name })); const persistProgress = () => S.setOnboarding({ role, goals, connected }); const addInvite = () => { const e = invEmail.trim(); if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(e)) { onToast && onToast("Enter a valid email", "error"); return; } S.addMember(e.split("@")[0], e, invRole); setInvited((l) => [...l, { email: e, roleId: invRole }]); setInvEmail(""); onToast && onToast("Invite sent (simulated)"); }; const addClientOnb = () => { if (!clName.trim()) { onToast && onToast("Name the client first", "error"); return; } const c = S.addClient({ name: clName.trim(), brandBrief: clBrief, brandVoice: clVoice }); clAssets.forEach((a) => S.addAsset({ name: a.name, url: a.url, kind: a.kind, category: "logo", keywords: [], platforms: [], clientId: c.id })); setCreatedClients((l) => [...l, { id: c.id, name: c.name, color: c.color }]); setClName(""); setClBrief(""); setClVoice(""); setClAssets([]); onToast && onToast(`“${c.name}” added — set up another or continue`); }; const finish = (dest) => { if (isAgency) { if (createdClients.length) S.setActiveClient(createdClients[0].id); } else { S.setBrand({ brandBrief: brief, brandVoice: voice }); } S.completeOnboarding({ role, goals, connected }); onDone(dest); }; const skipAll = () => { if (!isAgency) S.setBrand({ brandBrief: brief, brandVoice: voice }); S.completeOnboarding({ role, goals, connected, skipped: true }); onDone("dashboard"); }; const next = () => { persistProgress(); setStep((s) => Math.min(lastStep, s + 1)); }; const back = () => setStep((s) => Math.max(0, s - 1)); const canNext = key === "role" ? !!role : true; return (
{/* header */}
Leap
{/* progress */}
{STEP_KEYS.map((s, i) =>
)}
{key === "role" && (
Welcome to Leap

Who are you posting for?

This tailors your workspace, defaults and suggestions.

{D.ONBOARD_ROLES.map((r) => setRole(r.id)} />)}
)} {key === "goals" && (

What are your main goals?

Pick any that apply — we'll point you at the right tools first.

{D.ONBOARD_GOALS.map((g) => toggleGoal(g.id)} />)}
)} {key === "connect" && (

Connect your accounts

Connect the social accounts you'll publish to. You can add the API credentials any time in Settings → Integrations.

{D.PLATFORMS.map((p) => { const on = connected.includes(p.id); return ( ); })}
More integrations — Microsoft 365, ClickUp, the AI service — live in Settings → Integrations.
)} {key === "brand" && (

Set up your brand

This is what the AI uses to generate on-brand ideas and posts. You can refine it later in Settings → Brand.

Brand brief