// Shared invoice creation form — conforme facturation 2026. // Série + n° ATTRIBUÉ À LA FINALISATION · mentions 2026 (SIREN client, // catégorie d'opération, adresse de livraison, option TVA sur les débits) · // multi-taux PAR LIGNE · validation bloquante à la finalisation (les brouillons, // eux, acceptent tout). Machine à états : brouillon → finalisée (immuable). // Used inside a Dialog (web) and a full-screen view (mobile). // window.OryzeShared.InvoiceCreateForm (function () { const { Select, Input, Button, Amount, InvoiceLineRow, SegmentedControl, Toggle, StatusBadge } = window.OryzeDesignSystem_78c60a; const Ic = window.OryzeIcons; const CLIENTS = window.OryzeClients; const SERIES = window.OryzeInvoiceSeries; const lbl = { fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)" }; const err = { fontSize: 12.5, color: "var(--fin-negative)", fontWeight: 600, marginTop: 6 }; function InvoiceCreateForm({ onCancel, onSubmit, compact = false }) { const [series, setSeries] = React.useState("fac"); const [client, setClient] = React.useState("dupont"); const [due, setDue] = React.useState("28/04/2026"); const [category, setCategory] = React.useState(null); // biens | services | mixte — REQUIS à la finalisation const [deliveryOn, setDeliveryOn] = React.useState(false); const [delivery, setDelivery] = React.useState(""); const [vatOnDebits, setVatOnDebits] = React.useState(false); // Mentions légales (BR-FR-05) — auto-remplies, surcharge possible const [mentionsOpen, setMentionsOpen] = React.useState(false); const [mentions, setMentions] = React.useState({ PMT: window.OryzeMentions.PMT.text, PMD: window.OryzeMentions.PMD.text, AAB: window.OryzeMentions.AAB.text, }); const [lines, setLines] = React.useState([ { designation: "Atelier design system", qty: "1", unitPrice: "1200", tvaRate: 0.2 }, { designation: "Forfait intégration", qty: "2", unitPrice: "260", tvaRate: 0.2 }, ]); const [errors, setErrors] = React.useState({}); const [phase, setPhase] = React.useState("edit"); // edit | finalizing | done const cl = CLIENTS.find((c) => c.value === client); const serie = SERIES.find((s) => s.value === series); const assigned = serie.prefix + "-" + serie.next; // Totaux par taux const byRate = {}; let ht = 0; lines.forEach((l) => { const base = (parseFloat(l.qty) || 0) * (parseFloat(l.unitPrice) || 0); ht += base; byRate[l.tvaRate] = (byRate[l.tvaRate] || 0) + base; }); const rates = Object.keys(byRate).map(Number).sort((a, b) => b - a).map((r) => ({ rate: r, tva: byRate[r] * r })); const tva = rates.reduce((a, x) => a + x.tva, 0); const update = (i, patch) => setLines((ls) => ls.map((l, j) => (j === i ? { ...l, ...patch } : l))); const remove = (i) => setLines((ls) => ls.filter((_, j) => j !== i)); const add = () => setLines((ls) => [...ls, { designation: "", qty: "1", unitPrice: "", tvaRate: 0.2 }]); // Validation — BLOQUANTE à la finalisation seulement. function validate() { const e = {}; if (!category) e.category = "Choisissez la catégorie d'opération — mention obligatoire (2026)."; if (!lines.length || lines.some((l) => !l.designation.trim() || !(parseFloat(l.unitPrice) > 0) || !(parseFloat(l.qty) > 0))) e.lines = "Chaque ligne doit avoir une désignation, une quantité et un prix."; if (deliveryOn && !delivery.trim()) e.delivery = "Renseignez l'adresse de livraison, ou désactivez l'option."; if (!cl.email) e.email = "Adresse électronique du client manquante — requise (2026). Complétez la fiche client."; if (Object.values(mentions).some((t) => !t.trim())) e.mentions = "Les trois mentions légales doivent être renseignées."; return e; } function finalize() { const e = validate(); setErrors(e); if (Object.keys(e).length) return; setPhase("finalizing"); setTimeout(() => { setPhase("done"); setTimeout(() => onSubmit && onSubmit({ number: assigned }), 1600); }, 900); } if (phase === "done") { return (
Facture {assigned} finalisée
Numéro attribué dans la série {serie.prefix}-2026. Le document est scellé — toute correction passera par un avoir.
); } return (
{/* Série + numéro à la finalisation (compact : empilés) */}
setClient(e.target.value)} options={CLIENTS} style={{ minWidth: 0 }} /> setDue(e.target.value)} mono />
SIREN {cl.siren} {cl.address} {cl.email ? {cl.email} : courriel manquant — requis à la finalisation}
{errors.email &&
{errors.email}
}
{/* Catégorie d'opération (mention 2026) */}
Catégorie d'opération *
{errors.category &&
{errors.category}
}
{/* Options 2026 : livraison + débits */}
Adresse de livraison différente
Mention requise si les biens sont livrés ailleurs qu'à l'adresse de facturation
{deliveryOn && (
setDelivery(e.target.value)} /> {errors.delivery &&
{errors.delivery}
}
)}
TVA d'après les débits
Si vous avez opté pour l'exigibilité à la facturation (services)
{/* Mentions légales (BR-FR-05) — auto-remplies, éditables en surcharge */}
Mentions légales
Recouvrement · pénalités · escompte — pré-remplies, toujours présentes sur la facture
{mentionsOpen ? (
{["PMT", "PMD", "AAB"].map((k) => ( setMentions((m) => ({ ...m, [k]: e.target.value }))} /> ))}
) : (
{["PMT", "PMD", "AAB"].map((k) => (
{k} {mentions[k]}
))}
)} {errors.mentions &&
{errors.mentions}
}
{/* Lignes — taux PAR LIGNE (compact : empilées pour le mobile) */}
{compact ? (
Lignes
) : (
{["Désignation", "Qté", "PU HT", "TVA", "Total", ""].map((h, i) => (
{h}
))}
)}
{lines.map((l, i) => compact ? ( update(i, patch)} onRemove={() => remove(i)} /> ) : ( update(i, patch)} onRemove={() => remove(i)} /> ))}
{errors.lines &&
{errors.lines}
}
{/* Totaux — ventilés par taux */}
Total HT
{rates.filter((r) => r.tva > 0 || rates.length > 1).map((r) => (
TVA {(r.rate * 100).toLocaleString("fr-FR")} %
))}
Total TTC
{/* Actions — brouillon libre / finalisation validée */} {compact ? (
) : (
)}
La finalisation attribue le n° {assigned} et scelle le document.
); } // Ligne compacte (mobile) — empilée : désignation pleine largeur, puis // qté / PU / TVA, total à droite. Mêmes données que InvoiceLineRow. function CompactLine({ l, onChange, onRemove }) { const total = (parseFloat(l.qty) || 0) * (parseFloat(l.unitPrice) || 0); return (
onChange({ designation: e.target.value })} />
onChange({ qty: e.target.value })} style={{ minWidth: 0 }} /> onChange({ unitPrice: e.target.value })} style={{ minWidth: 0 }} />