// Flows Carte partagés web + mobile — contenus SANS conteneur (le web les
// monte dans Dialog, le mobile dans BottomSheet). UX reprise du Figma
// « Oryze App UX/UI » (audit docs/audit-figma-oryze-app.md), redessinée en
// langage Oryze : commande de carte (finition + livraison + frais),
// changement de PIN (code de vérification → nouveau → confirmation),
// vérification de clôture, suivi de livraison. Mode démo assumé partout.
// window.OryzeShared.{NewCardFlow,PinChangeFlow,ClosureVerify,DeliveryInfoPanel}
(function () {
const { Button, Amount, OtpInput, StatusTimeline, StatusBadge } = window.OryzeDesignSystem_78c60a;
const Ic = window.OryzeIcons;
const CardVisual = window.OryzeShared.CardVisual;
const lbl = { fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)" };
const helpTxt = { fontSize: 12, color: "var(--text-subtle)", lineHeight: 1.5 };
const row = (k, v) => (
{k}
{v}
);
const sunken = { display: "flex", flexDirection: "column", gap: 8, padding: "12px 14px", background: "var(--surface-sunken)", border: "var(--border-hair) solid var(--line-divider)", borderRadius: "var(--radius-md)" };
function DoneTile({ title, children }) {
return (
);
}
/* ---------- Commande d'une nouvelle carte : finition → récap → commandée ---------- */
function NewCardFlow({ onCancel, onDone }) {
const K = window.OryzeCarte;
const S = window.OryzeSeller;
const [design, setDesign] = React.useState("majorelle");
const [step, setStep] = React.useState("design"); // design | recap | done
const [ordering, setOrdering] = React.useState(false);
const designLabel = (K.designs.find((d) => d.value === design) || {}).label;
const SWATCH = { majorelle: "var(--oryze-majorelle)", ink: "var(--oryze-ink)", lilac: "var(--oryze-lilac)" };
if (step === "done") {
return (
Finition {designLabel} — livraison estimée le {K.newCard.eta}. Suivi disponible depuis la vue Carte.
{row("N° de suivi", {K.delivery.tracking})}
{row("Transporteur", K.delivery.courier)}
);
}
if (step === "recap") {
return (
{row("Carte", "Physique · finition " + designLabel)}
{row("Livraison", S.address)}
{row("Délai estimé", K.newCard.delay + " · " + K.newCard.eta)}
Débité du compte pro à l'expédition. Mode démo — aucune commande réelle.
}
onClick={() => { setOrdering(true); setTimeout(() => { setOrdering(false); setStep("done"); }, 900); }}>Commander
);
}
return (
Finition
{K.designs.map((d) => (
))}
{row("Livraison", S.address)}
{row("Délai estimé", K.newCard.delay)}
Adresse du siège — modifiable dans Réglages d'entreprise.
);
}
/* ---------- Changement de PIN : code de vérification → nouveau → confirmation ---------- */
function PinChangeFlow({ onClose }) {
const [step, setStep] = React.useState("verify"); // verify | new | confirm | done
const [code, setCode] = React.useState("");
const [pin1, setPin1] = React.useState("");
const [pin2, setPin2] = React.useState("");
const [err, setErr] = React.useState(null);
const [left, setLeft] = React.useState(59);
React.useEffect(() => {
if (step !== "verify" || left <= 0) return;
const t = setTimeout(() => setLeft((s) => s - 1), 1000);
return () => clearTimeout(t);
}, [step, left]);
if (step === "done") {
return (
Actif immédiatement pour paiements et retraits. Ne le communiquez jamais — on ne vous le demandera jamais.
);
}
const STEPS = {
verify: { title: "Vérification", sub: "Code envoyé au " + window.OryzeCarte.pinContact + " — saisissez-le pour continuer.", len: 6, mask: false, val: code, set: setCode },
new: { title: "Nouveau PIN", sub: "4 chiffres. Évitez date de naissance et suites (1234).", len: 4, mask: true, val: pin1, set: setPin1 },
confirm: { title: "Confirmez le PIN", sub: "Saisissez le même code une seconde fois.", len: 4, mask: true, val: pin2, set: setPin2 },
};
const s = STEPS[step];
const stepIdx = step === "verify" ? 1 : step === "new" ? 2 : 3;
function next(v) {
setErr(null);
if (step === "verify") { setStep("new"); }
else if (step === "new") { setStep("confirm"); setPin2(""); }
else {
if (v !== pin1) { setErr("Les deux saisies ne correspondent pas."); setPin2(""); return; }
setStep("done");
}
}
return (
{s.title}
étape {stepIdx}/3
{s.sub}
{err &&
{err}
}
{step === "verify" && (
Code non reçu ?
{left > 0
? Renvoyer dans 0:{String(left).padStart(2, "0")}
: }
)}
Mode démo — n'importe quel code fonctionne.
);
}
/* ---------- Vérification de clôture (opposition) ---------- */
function ClosureVerify({ onVerified, onCancel }) {
const [code, setCode] = React.useState("");
return (
Dernière étape : saisissez le code envoyé au {window.OryzeCarte.pinContact} pour confirmer l'opposition — elle est définitive.
onVerified && onVerified()} />
Mode démo — n'importe quel code fonctionne.
);
}
/* ---------- Suivi de livraison ---------- */
function DeliveryInfoPanel() {
const K = window.OryzeCarte;
const S = window.OryzeSeller;
return (
Carte {K.card.replacement}
{row("Destinataire", S.name)}
{row("Adresse", S.address)}
{row("Transporteur", K.delivery.courier)}
{row("N° de suivi", {K.delivery.tracking})}
La carte arrive désactivée — activation à réception, plafonds et réglages repris automatiquement.
);
}
window.OryzeShared = window.OryzeShared || {};
Object.assign(window.OryzeShared, { NewCardFlow, PinChangeFlow, ClosureVerify, DeliveryInfoPanel });
})();