/* screen-onboarding.jsx — first-run welcome + quick company setup → window.QScreens.Onboarding */
(function () {
const { useState } = React;
const Q = window.Q, Icons = window.Icons;
/* Directional step slide: replaces the plain cross-fade between the intro
and profile steps so "next" reads as forward motion (content enters from
the right, like the app's iOS push) and "back" reverses it. Injected once;
the index.html prefers-reduced-motion media query collapses it to instant. */
if (typeof document !== "undefined" && !document.getElementById("q-ob-anim")) {
const s = document.createElement("style");
s.id = "q-ob-anim";
s.textContent =
"@keyframes q-ob-fwd { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }" +
"@keyframes q-ob-back { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }" +
".q-ob-fwd { animation: q-ob-fwd .34s cubic-bezier(.32,.72,0,1) both; }" +
".q-ob-back { animation: q-ob-back .34s cubic-bezier(.32,.72,0,1) both; }";
document.head.appendChild(s);
}
const { Icon, NitaMark } = Icons;
const { Button, Field, Input, Select, Segmented, Kicker, Sparkle } = Q;
const t = window.t;
function Bullet({ icon, title, body }) {
return (
{title}
{body}
);
}
/* ── First-run choice (tester builds) ──────────────────────────
Rendered by App before anything else when tester mode is on and no
saved db / stored nita_mode exists: demo tour vs. clean setup.
q-stagger gives the q-fade-up entrance; the global
prefers-reduced-motion rule in index.html collapses it to instant. */
function ChoiceCard({ icon, title, sub, primary, onClick }) {
const [pressed, setPressed] = useState(false);
const release = () => setPressed(false);
return (
);
}
function FirstRun({ onChoose }) {
return (
{t("brand.name")}
{t("firstrun.kicker")}
{t("firstrun.title")}
onChoose("demo")} />
onChoose("fresh")} />
{t("firstrun.note")}
);
}
function Onboarding({ api, onFinish }) {
const { useRef, useEffect } = React;
const [step, setStep] = useState(0);
/* Track which way the user moved so the step container animates
directionally (forward on "continue", back on the chevron). */
const [dir, setDir] = useState("fwd");
/* Scroll cue for the intro step: on short viewports the three value
props (and the CTA) fall below the fold with no hint that there's
more. Track "is there more below" and paint a bottom fade + chevron
while the user hasn't reached the end. The fade lives behind the CTA
block so it only suggests "scroll", never hides the button. */
const introRef = useRef(null);
const [moreBelow, setMoreBelow] = useState(false);
const checkScroll = () => {
const el = introRef.current;
if (!el) { setMoreBelow(false); return; }
setMoreBelow(el.scrollHeight - el.clientHeight - el.scrollTop > 12);
};
useEffect(() => {
if (step !== 0) { setMoreBelow(false); return; }
checkScroll();
const el = introRef.current;
if (!el || typeof ResizeObserver === "undefined") return;
const ro = new ResizeObserver(checkScroll);
ro.observe(el);
return () => ro.disconnect();
}, [step]);
const go = (n) => { setDir(n > step ? "fwd" : "back"); setStep(n); };
const [owner, setOwner] = useState("");
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [currency, setCurrency] = useState(api.db.COMPANY.currency);
const [biztype, setBiztype] = useState(api.db.COMPANY.businessType || "both");
const curOpts = Object.values(window.CURRENCIES).map(c => ({ value: c.code, label: `${c.code} · ${c.name}` }));
/* Build the profile the same way whether the user finishes or skips, so
"Skip for now" still keeps the currency + business-type they picked
(and a name they typed) — only the explicit text fields are optional.
owner → COMPANY.owner drives the personalized Home greeting. */
const buildProfile = () => {
const profile = { currency, businessType: biztype };
if (owner.trim()) profile.owner = owner.trim();
if (name.trim()) profile.name = name.trim();
if (email.trim()) profile.email = email.trim();
return profile;
};
const finish = () => onFinish(buildProfile());
const skip = () => onFinish(buildProfile());
return (
{step === 0 ? (
{t("brand.name")}
{t("ob.kicker")}
{t("ob.title")}
{t("ob.body")}
{/* faux AI demo chip */}
{t("brand.name")}
“{t("ob.sample.prompt")}”
{t("ob.sample.result")}
{/* q-stagger cascades the three value props ~40ms apart so they
land one at a time under the AI chip — classic onboarding rhythm
(collapses to instant under prefers-reduced-motion). */}
{/* Bottom scroll cue: a soft fade + chevron, shown only while there
is more content below the fold. Pointer-events:none so it never
eats taps; opacity-only transition keeps it calm. */}
) : (
{t("ob.profile.kicker")}
{t("ob.profile.title")}
{t("ob.profile.body")}
{/* Logo upload is a later-build feature. Render it as a plainly
informational placeholder — no action word ("Upload"), no
button affordance — so it reads as "Logo · optional, add it
in Settings" rather than a broken dropzone control. The
"change anytime in Settings" context lives in ob.profile.body
above. cursor:default + userSelect:none keep it inert. */}