// payment.jsx — Paiement d'acompte (signature + carte/virement) ou paiement du solde
const { useState: useP } = React;
function eu(n){ return n.toLocaleString('fr-FR')+' €'; }
const LBC_BANK = { beneficiaire:'LBC Déménagement SAS', iban:'FR76 3000 4008 2800 0001 2345 678', bic:'BNPAFRPPXXX' };
function CopyRow({ label, value, big, onCopy }) {
const [c, setC] = useP(false);
const copy = ()=>{ navigator.clipboard?.writeText(value.replace(/\s/g,'')).catch(()=>{}); setC(true); onCopy&&onCopy(); setTimeout(()=>setC(false),1600); };
return (
e.currentTarget.style.background='var(--hover)'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
);
}
function SignaturePad({ onDrawn }) {
const cv = React.useRef(null);
const drawing = React.useRef(false);
const last = React.useRef(null);
const has = React.useRef(false);
React.useEffect(()=>{ const c=cv.current; if(!c) return; c.width=c.offsetWidth*2; c.height=c.offsetHeight*2; const ctx=c.getContext('2d'); ctx.scale(2,2); },[]);
const pos = (e)=>{ const r=cv.current.getBoundingClientRect(); const t=e.touches?e.touches[0]:e; return { x:t.clientX-r.left, y:t.clientY-r.top }; };
const start = (e)=>{ drawing.current=true; last.current=pos(e); };
const move = (e)=>{ if(!drawing.current) return; const ctx=cv.current.getContext('2d'); const p=pos(e); ctx.strokeStyle='#14384E'; ctx.lineWidth=2.2; ctx.lineCap='round'; ctx.beginPath(); ctx.moveTo(last.current.x,last.current.y); ctx.lineTo(p.x,p.y); ctx.stroke(); last.current=p; if(!has.current){ has.current=true; onDrawn(true); } e.preventDefault&&e.preventDefault(); };
const end = ()=>{ drawing.current=false; };
const clear = ()=>{ const c=cv.current; c.getContext('2d').clearRect(0,0,c.width,c.height); has.current=false; onDrawn(false); };
return (
);
}
function PaymentFlow({ total, reference, date, mode='acompte', onComplete, onClose, showToast }) {
const deposit = Math.round(total*0.3);
const solde = total - deposit;
const isSolde = mode==='solde';
const amount = isSolde ? solde : deposit;
const [step, setStep] = useP(isSolde ? 'method' : 'sign');
const [chosen, setChosen] = useP(null);
const [signed, setSigned] = useP(false);
const [agree, setAgree] = useP(false);
const [card, setCard] = useP({ num:'', exp:'', cvc:'', name:'' });
const setC = (k,v)=> setCard(s=>({ ...s, [k]:v }));
const cardOk = card.num.replace(/\s/g,'').length>=16 && card.exp.length===5 && card.cvc.length>=3 && card.name.trim().length>2;
const fmtNum = v => v.replace(/\D/g,'').slice(0,16).replace(/(.{4})(?=.)/g,'$1 ').trim();
const fmtExp = v => { const d=v.replace(/\D/g,'').slice(0,4); return d.length>2? d.slice(0,2)+'/'+d.slice(2):d; };
const payCard = ()=>{ setStep('processing'); setTimeout(()=>{ setChosen('carte'); onComplete('carte'); setStep('done'); }, 1600); };
const confirmVir = ()=>{ setChosen('virement'); onComplete('virement'); setStep('done'); };
const Header = ({ title, back }) => (
{back && setStep(back)} style={{ color:'var(--muted)', display:'flex' }}> }
{title}
{step!=='processing' &&
}
);
const Summary = () => (
{isSolde ? 'Solde à régler' : <>Acompte aujourd'hui (30 %) }
{eu(amount)}
{isSolde ? 'Devis total' : `Solde le jour J · ${date}`}
{isSolde ? eu(total) : eu(solde)}
);
let content;
if (step==='sign') content = (
<>
Signez votre devis {reference} de {eu(total)} pour le confirmer.
setAgree(a=>!a)} style={{ width:20, height:20, borderRadius:6, flexShrink:0, marginTop:1, display:'flex', alignItems:'center', justifyContent:'center', background: agree?'var(--brand)':'var(--bg)', border: agree?'none':'1.5px solid var(--border-2)', color:'#fff' }}>{agree &&
J'accepte le devis et les conditions générales de LBC Déménagement.
setStep('method')}>Continuer vers le paiement
);
else if (step==='method') content = (
<>
Mode de paiement
{[['card','euroCircle','Carte bancaire','Paiement immédiat et sécurisé'],
['virement','building','Virement bancaire', isSolde?'Sous 2–3 j ouvrés':'Créneau pré-réservé · sous 2–3 j']].map(([k,ic,t,d])=>(
setStep(k)} style={{ display:'flex', alignItems:'center', gap:14, width:'100%', textAlign:'left', padding:'14px 16px', border:'1px solid var(--border-2)', borderRadius:12, background:'var(--card)', transition:'.14s' }}
onMouseEnter={e=>{ e.currentTarget.style.borderColor='var(--brand)'; e.currentTarget.style.background='var(--hover)'; }}
onMouseLeave={e=>{ e.currentTarget.style.borderColor='var(--border-2)'; e.currentTarget.style.background='var(--card)'; }}>
))}
);
else if (step==='card') content = (
<>
Effectuez un virement de {eu(amount)} avec la référence ci-dessous.
showToast&&showToast('Copié')} />
showToast&&showToast('IBAN copié')} />
showToast&&showToast('Copié')} />
showToast&&showToast('Référence copiée')} />
showToast&&showToast('Copié')} />
Plus tard
);
else if (step==='processing') content = (
Paiement en cours…
Ne fermez pas cette fenêtre.
);
else content = (
{[...Array(12)].map((_,i)=>(
))}
{isSolde ? 'Solde réglé !' : 'Déménagement réservé !'}
{isSolde
? <>Votre déménagement est intégralement réglé . Merci de votre confiance !
: chosen==='carte'
? <>Votre acompte de {eu(deposit)} est réglé. Le créneau du {date} est confirmé.
: <>Votre créneau du {date} est pré-réservé. Il sera confirmé dès réception de votre virement de {eu(deposit)} .}
Voir mon suivi
{ if(e.target===e.currentTarget && step!=='processing') onClose(); }}>
{content}