// web/components.jsx — shared components for Le Cayenne web const { useState: wcS, useEffect: wcE, useRef: wcR } = React; // Icons const WC_I = { cart: (p={}) => , arrow: (p={}) => , back: (p={}) => , close: (p={}) => , check: (p={}) => , heart: (p={}) => , plus: (p={}) => , bolt: (p={}) => , shield: (p={}) => , gift: (p={}) => , trash: (p={}) => , }; // [GOAL-SYNC 2026-07-08] QR fidélité RÉEL — remplace l'ancien mock décoratif 13x13. // Mint-on-display : POST /api/frontend/loyalty/qr via LC.api.loyaltyQr() (token signé // « lqr.… », TTL 300 s, throttle backend 30/min — 1 mint / 5 min largement sous la limite). // Rendu SVG par la lib vendorisée LOCALE window.qrcode (vendor/qrcode.js, chargée par // index.html — AUCUN CDN) avec garde si absente → message FR « QR indisponible ». // Compte à rebours ttl_seconds + re-mint AUTO à expiration + bouton « Actualiser ». // ⚠ JAMAIS de format legacy « FK: » (rejeté backend) ni de QR persistant offline. function WebQR({ onCode }) { const [qr, setQr] = wcS({ token: '', ttl: 0, loading: false, error: '' }); const aliveR = wcR(true); wcE(() => { aliveR.current = true; return () => { aliveR.current = false; }; }, []); const api = (typeof window !== 'undefined' && window.LC && window.LC.api) || null; const canMint = !!(api && typeof api.loyaltyQr === 'function' && typeof api.isAuthed === 'function' && api.isAuthed()); const mint = () => { if (!canMint) { setQr({ token: '', ttl: 0, loading: false, error: 'QR indisponible' }); return; } setQr({ token: '', ttl: 0, loading: true, error: '' }); api.loyaltyQr().then(d => { if (!aliveR.current) return; d = d || {}; if (!d.token) { setQr({ token: '', ttl: 0, loading: false, error: 'QR indisponible — réessayez.' }); return; } setQr({ token: String(d.token), ttl: parseInt(d.ttl_seconds, 10) || 300, loading: false, error: '' }); if (onCode && d.loyalty_code) onCode(String(d.loyalty_code)); }).catch(e => { if (!aliveR.current) return; // Erreur réseau/HTTP GÉRÉE (jamais thrown) — message FR propre + bouton Actualiser. setQr({ token: '', ttl: 0, loading: false, error: (e && e.message) || 'QR indisponible — réessayez.' }); }); }; // Mint-on-display (au montage uniquement). wcE(() => { mint(); }, []); // Compte à rebours 1 s. wcE(() => { if (!qr.token || qr.ttl <= 0) return; const t = setTimeout(() => { setQr(s => (s.token ? { ...s, ttl: s.ttl - 1 } : s)); }, 1000); return () => clearTimeout(t); }, [qr.token, qr.ttl]); // Expiré → re-mint automatique (uniquement depuis un token valide, jamais en boucle d'erreur). wcE(() => { if (qr.token && qr.ttl === 0) mint(); }, [qr.token, qr.ttl]); // Rendu SVG local (garde lib absente → fallback FR). let svgHtml = ''; if (qr.token && typeof window !== 'undefined' && typeof window.qrcode === 'function') { try { const q = window.qrcode(0, 'M'); q.addData(qr.token); q.make(); svgHtml = q.createSvgTag({ cellSize: 3, margin: 0, scalable: true }) .replace(' {svgHtml ? (
) : (
{qr.loading ? 'Génération…' : 'QR indisponible'}
)}
{svgHtml ? `Expire dans ${mm}:${ss}` : (qr.loading ? 'Génération du QR…' : (qr.error || 'QR indisponible'))}
{canMint && ( )}
); } // Navbar function WebNav({ route, onRoute, cartCount, onCart, isAuth, onAccount, onLogo }) { const [open, setOpen] = wcS(false); wcE(() => { setOpen(false); }, [route]); // [GOAL-SYNC-HEAL 2026-07-08] Fin du résidu démo (avatar + prénom codés en dur). // Avatar + libellé du bouton compte DÉRIVÉS du profil réel : initiale depuis // les derniers chiffres du téléphone (seule donnée client dispo via l'API), // sinon avatar générique neutre. Libellé sobre « Mon compte ». const navApi = (typeof window !== 'undefined' && window.LC && window.LC.api) || null; const acctPhone = (navApi && typeof navApi.getPhone === 'function' && navApi.getPhone()) || ''; const acctAva = (String(acctPhone).replace(/\D/g, '').slice(-2)) || '👤'; const acctLabel = 'Mon compte'; const links = [ { id: 'home', label: 'Accueil' }, { id: 'menu', label: 'Menu' }, { id: 'orders', label: 'Commandes' }, { id: 'loyalty', label: 'Fidélité' }, ]; return (
{isAuth ? ( ) : ( )} {/* [Z-7 HEAL 2026-05-18 P2-2] aria-expanded + aria-controls reflect drawer state */}
{open && (
{links.map(l => ( ))}
)}
); } // Footer // [W.7.1 LCEN heal 2026-05-18] 4th column "Légal" added with anchor links to // /legal/*.html static pages (LCEN art. 6 III + CGV L221-5 + RGPD + CNIL cookies + INCO 1169/2011). function WebFooter({ onRoute }) { // [WEB-RT-06 heal 2026-06-04] Store buttons are prototype no-ops; surface a // "Démo V1" toast affordance instead of a silent dead click. const [storeToast, setStoreToast] = wcS(''); wcE(() => { if (!storeToast) return; const t = setTimeout(() => setStoreToast(''), 2600); return () => clearTimeout(t); }, [storeToast]); const demoToast = (msg) => setStoreToast(msg); return ( ); } // Modal shell // [A11Y-MODAL-01 heal 2026-06-04 WCAG 2.1.2/2.4.3/4.1.2] role=dialog now always // carries an accessible name (aria-labelledby > aria-label > FR fallback), traps // Tab focus inside the dialog while open, and restores focus to the opener on close. function WebModal({ open, onClose, children, full = false, label, labelledBy }) { const dialogRef = wcR(null); const openerRef = wcR(null); // Escape-to-close + focus trap (Tab cycling) while open. wcE(() => { if (!open) return; const getFocusable = () => { const node = dialogRef.current; if (!node) return []; return Array.prototype.slice.call(node.querySelectorAll( 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])' )).filter(el => el.offsetParent !== null || el === document.activeElement); }; const onKey = (e) => { if (e.key === 'Escape') { onClose(); return; } if (e.key !== 'Tab') return; const node = dialogRef.current; if (!node) return; const items = getFocusable(); if (items.length === 0) { e.preventDefault(); node.focus(); return; } const first = items[0], last = items[items.length - 1]; const active = document.activeElement; if (e.shiftKey) { if (active === first || active === node || !node.contains(active)) { e.preventDefault(); last.focus(); } } else if (active === last) { e.preventDefault(); first.focus(); } }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [open, onClose]); // Capture opener, move focus into the dialog on open, restore it on close. wcE(() => { if (!open) return; openerRef.current = document.activeElement; const node = dialogRef.current; if (node) { const focusable = node.querySelector( 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])' ); (focusable || node).focus(); } return () => { const opener = openerRef.current; if (opener && typeof opener.focus === 'function') opener.focus(); }; }, [open]); if (!open) return null; const nameProps = labelledBy ? { 'aria-labelledby': labelledBy } : { 'aria-label': label || 'Boîte de dialogue' }; return (
{/* [MOBILE-FULLSCREEN 2026-07-12] La taille du modal "full" est pilotée par la CSS (.lc-modal--full) et NON par un style inline : un style inline battrait les media queries et empêcherait le plein écran mobile (footer détaché → « page pas complète »). */}
e.stopPropagation()}> {children}
); } Object.assign(window, { WC_I, WebNav, WebFooter, WebModal, WebQR });