// Oryze — Onboarding compte pro (mobile). All 7 step screens.
// Registers each on window.OryzeOnb. Reuses design-system primitives + OryzeIcons.
// Mock only — no camera/biometrics actually invoked.
(function () {
const DS = window.OryzeDesignSystem_78c60a;
const { Button, Card, Input, Select, Toggle, SegmentedControl, OtpInput, Tag, StatusTimeline, Avatar } = DS;
const Ic = window.OryzeIcons;
const lbl = { fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)" };
const H = (t) => ({ fontWeight: 700, fontSize: 24, letterSpacing: "-0.02em", lineHeight: 1.18 });
const sub = { fontSize: 14.5, color: "var(--text-muted)", lineHeight: 1.5, marginTop: 8 };
// ---- 1. Création de compte -------------------------------------------
function AccountScreen({ next, onLogin }) {
const [email, setEmail] = React.useState("marie.lefevre@atelier.fr");
return (
Créez votre compte pro
La gestion financière de votre activité, au même endroit. Quelques minutes suffisent.
setEmail(e.target.value)} iconLeft={
} />
On vous enverra un code à usage unique par e-mail — pas de mot de passe à retenir.
} onClick={next}>Continuer
En continuant, vous acceptez les conditions d'utilisation et la politique de confidentialité d'Oryze.
{onLogin && (
Déjà un compte ?{" "}
)}
);
}
// ---- 2. Vérification OTP ---------------------------------------------
function OtpScreen({ next }) {
const [code, setCode] = React.useState("");
const [secs, setSecs] = React.useState(38);
React.useEffect(() => {
if (secs <= 0) return;
const t = setTimeout(() => setSecs((s) => s - 1), 1000);
return () => clearTimeout(t);
}, [secs]);
return (
Vérifiez votre email
On a envoyé un code à 6 chiffres à marie.lefevre@atelier.fr.
setTimeout(next, 350)} />
{secs > 0
? <>Renvoyer le code dans 0:{String(secs).padStart(2, "0")}
: }
);
}
// ---- 3. Votre activité -----------------------------------------------
function BusinessScreen({ next }) {
const [form, setForm] = React.useState("micro");
const [siret, setSiret] = React.useState("814 209 557 00018");
const [sector, setSector] = React.useState("design");
const [tva, setTva] = React.useState("franchise");
return (
Votre activité
Ces informations adaptent Oryze à votre régime — TVA, échéances, déclarations.
}>Continuer
);
}
// ---- 4. Vérification d'identité (KYC) --------------------------------
function KycScreen({ next }) {
const [selfie, setSelfie] = React.useState(false);
const docs = [
{ key: "recto", label: "Pièce d'identité — recto", icon: "file", state: "added" },
{ key: "verso", label: "Pièce d'identité — verso", icon: "file", state: "added" },
{ key: "selfie", label: "Photo de vérification (selfie)", icon: "search", state: selfie ? "added" : "todo" },
];
return (
Vérifions votre identité
Une étape sécurisée, réalisée par notre établissement partenaire. Munissez-vous de votre pièce d'identité.
{docs.map((d) => {
const DIcon = Ic[d.icon] || Ic.file;
const added = d.state === "added";
return (
{d.label}
{added ? "Ajouté ✓" : "Ouvrir l'appareil photo"}
{added
?
: } onClick={() => setSelfie(true)}>Photo}
);
})}
Vos documents sont chiffrés et utilisés uniquement pour la vérification.
);
}
// ---- 5. Sécurité — code d'accès --------------------------------------
function SecurityScreen({ next }) {
const [pin, setPin] = React.useState("");
const [bio, setBio] = React.useState(true);
const press = (d) => setPin((p) => (p.length < 4 ? p + d : p));
const del = () => setPin((p) => p.slice(0, -1));
return (
Sécurisez votre accès
Choisissez un code à 4 chiffres pour ouvrir Oryze.
{}} autoFocus={false} />
Déverrouillage biométrique
Face ID / empreinte
);
}
// ---- 6. Vérification en cours ----------------------------------------
function ReviewScreen({ next }) {
const [approved, setApproved] = React.useState(false);
React.useEffect(() => {
const t = setTimeout(() => setApproved(true), 3500);
return () => clearTimeout(t);
}, []);
return (
Votre dossier est en cours de vérification
Notre établissement partenaire vérifie votre dossier. Cela prend généralement quelques minutes — on vous prévient dès que votre compte pro est prêt.
{approved ? (
Dossier approuvé par notre établissement partenaire — votre espace est prêt.
} onClick={next}>Accéder à mon espace
) : (
On vous notifie dès l'approbation. Vous pouvez fermer l'app, on garde votre place.
)}
);
}
// ---- 7. C'est prêt ----------------------------------------------------
function DoneScreen({ finish }) {
return (
Bienvenue, Marie
Votre compte pro Oryze est actif. Votre tableau de bord vous attend.
Atelier Lefèvre
Compte pro · •••• 4827
Actif
} onClick={finish}>Accéder à mon espace
);
}
// ---- shared bits ------------------------------------------------------
function Step({ children, center }) {
return {children}
;
}
function IconBadge({ children, tone, big }) {
const d = big ? 68 : 56;
return (
{children}
);
}
function DonutMark({ size = 64 }) {
return (
);
}
function Keypad({ onPress, onDelete }) {
const keys = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", "del"];
return (
{keys.map((k, i) => {
if (k === "") return
;
const isDel = k === "del";
return (
);
})}