// FOOTPASS v2 · Onboarding : composants partagés, compte, rôle, plan, paiement // Tarifs et positionnement alignés sur footpass.app (PassSTART / PassPRO, CHF, essai 10 jours) // ── Mini-icônes propres à l'onboarding (formes simples uniquement) ── const OBI = { Bubble: ({ s = 13, c = 'currentColor' }) => ( ), Check: ({ s = 13, c = 'currentColor' }) => ( ), Lock: ({ s = 12, c = 'currentColor' }) => ( ), Search: ({ s = 16, c = 'currentColor' }) => ( ), Case: ({ s = 17, c = 'currentColor' }) => ( ), Board: ({ s = 17, c = 'currentColor' }) => ( ), Building: ({ s = 17, c = 'currentColor' }) => ( ), CardRef: ({ s = 16, c = 'currentColor' }) => ( ), Arrow: ({ s = 12, c = 'currentColor' }) => ( ), Chip: ({ s = 16, c = 'currentColor' }) => ( ), }; // ── Rôles : toute la communauté du football, pas seulement le pro ── const OB_ROLES = [ { id: 'joueur', label: 'Joueur', desc: 'Pro, amateur ou en formation', rec: 'start', icon: 'User' }, { id: 'agent', label: 'Agent', desc: 'Représentation de joueurs', rec: 'pro', icon: 'Case' }, { id: 'entraineur', label: 'Entraîneur', desc: 'Coach, éducateur, formateur', rec: 'start', icon: 'Board' }, { id: 'recruteur', label: 'Recruteur', desc: 'Détection de talents', rec: 'pro', icon: 'Search' }, { id: 'staff', label: 'Dirigeant & staff', desc: 'Club, académie, association', rec: 'start', icon: 'Building' }, { id: 'arbitre', label: 'Arbitre', desc: 'Officiel de match', rec: 'start', icon: 'CardRef' }, { id: 'juriste', label: 'Juriste', desc: 'Droit du sport, contrats', rec: 'pro', icon: 'Doc' }, { id: 'autre', label: 'Autre rôle', desc: 'Médias, bénévoles, famille…', rec: 'start', icon: 'Globe' }, ]; const OB_ROLE_LABEL = Object.fromEntries(OB_ROLES.map((r) => [r.id, r.label])); // Le Pass ID est en anglais (langue des documents de voyage) · la carte ne doit JAMAIS // afficher de français : on traduit par id ET par libellé, insensible à la casse/accents. const OB_ROLE_EN = { joueur: 'Player', agent: 'Agent', entraineur: 'Coach', recruteur: 'Scout', staff: 'Club staff', arbitre: 'Referee', juriste: 'Lawyer', autre: 'Member', // libellés FR → EN (au cas où le libellé est passé à la place de l'id) 'joueur ': 'Player', 'entraineur ': 'Coach', 'dirigeant & staff': 'Club staff', 'autre role': 'Member', }; // Normalise (minuscules, sans accents) puis traduit ; fallback propre si inconnu. const obRoleEn = (r) => { if (!r) return 'Pending'; const key = r.toString().trim().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, ''); return OB_ROLE_EN[key] || r; }; function ObRoleIcon({ icon }) { if (icon === 'User') return ; if (icon === 'Doc') return ; if (icon === 'Globe') return ; const C = OBI[icon]; return ; } // ── Plans : tarifs réels footpass.app/tarifs ── const OB_PLANS = [ { id: 'start', name: 'PassSTART', m: '9,99', y: '99,99', ym: '8,33', save: '−17 %', tag: 'Pour les acteurs du football amateur', feats: ['Pass ID', 'Messagerie sécurisée', 'Coffre-fort', 'Support standard', 'iOS et Android'] }, { id: 'pro', name: 'PassPRO', m: '29,99', y: '239,99', ym: '19,99', save: '−33 %', tag: 'Pour les acteurs du football professionnel', feats: ['Tout PassSTART', 'Lié à une structure : 19,99 CHF/mois', 'Autorisations · représentation & délégations', 'Signature & historique certifié', 'Salons d’appel', 'Accès Desktop', 'Support prioritaire'] }, ]; const OB_PLAN_BY_ID = Object.fromEntries(OB_PLANS.map((p) => [p.id, p])); function obFrDate(plusDays) { // Audit 360 P0-4 · une seule source de temps : le calendrier canonique du prototype (18 juin 2026) const C = window.FP_CAL; const d = C && C.todayD ? new Date(2026, 5, C.todayD) : new Date(); d.setDate(d.getDate() + plusDays); return d.toLocaleDateString(window.FP_LANG === 'en' ? 'en-US' : 'fr-FR', { day: 'numeric', month: 'long' }); } // ── Carte Pass ID · le passeport numérique du football ── // Codes visuels universels du passeport (norme ICAO) : libellés bilingues FR/EN, // zone portrait, symbole biométrique, sceau holographique, bande MRZ lisible machine. const obMrzSafe = (s) => s.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toUpperCase().replace(/[^A-Z0-9]+/g, '<'); // ── Logique interne du N° Pass ─────────────────────────────────── // 12 chiffres structurés : AA FF RRRR SSS C // AA · année d'émission (24 = 2024) // FF · fédération de rattachement (80 = registre Europe/UEFA) // RRRR · registre de l'organisation (1196 = AS Monaco) // SSS · séquence du membre dans ce registre // C · clé de Luhn sur les 11 chiffres : tout numéro altéré à la main // casse la clé et se détecte hors-ligne, sans appel serveur. // Les codes d'invitation suivent le même schéma (registre + séquence + clé), // émis et révoqués par le registre du club, à usage unique. const obLuhn = (payload) => { let sum = 0; const ds = payload.split('').reverse(); for (let i = 0; i < ds.length; i++) { let d = +ds[i]; if (i % 2 === 0) { d *= 2; if (d > 9) d -= 9; } sum += d; } return String((10 - (sum % 10)) % 10); }; const obPassNumber = ({ year = '24', fed = '80', org = '1196', seq = '004' } = {}) => { const payload = year + fed + org + seq; return (payload + obLuhn(payload)).replace(/(\d{4})(\d{4})(\d{4})/, '$1 $2 $3'); }; // Clé ICAO 9303 (pondération 7-3-1, A=10…Z=35, '<'=0) · celle des vrais passeports. const obIcaoCheck = (s) => { const w = [7, 3, 1]; let sum = 0; for (let i = 0; i < s.length; i++) { const c = s[i]; sum += (c === '<' ? 0 : c >= '0' && c <= '9' ? +c : c.charCodeAt(0) - 55) * w[i % 3]; } return String(sum % 10); }; // Puce de contact dorée · comme sur une carte bancaire / un passeport biométrique const ObIcaoChip = () => ( ); const ObClubCrest = ({ org }) => { const ini = (org || '').trim().split(/\s+/).map((w) => (w === w.toUpperCase() && w.length <= 3 ? w : w[0])).join('').slice(0, 3).toUpperCase(); return ( ); }; // Fond guilloché · entrelacs fins type billet de banque, quasi impossibles à reproduire const ObGuilloche = () => ( ); function ObPassCard({ name, role, org, orgMissing, agent, agentLabel = 'Agent', number = obPassNumber(), verified = false, shimmer = false, float = false, gold = false, photo, initials, clubLabel = 'Club', tier, tierKind, redact = false }) { const parts = (name || '').trim().split(/\s+/).filter(Boolean); const given = obMrzSafe(parts[0] || 'VOTRE'); const surname = obMrzSafe(parts.length > 1 ? parts.slice(1).join(' ') : 'NOM'); const pad = '<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<'; // Nom affiché : prénom inchangé, nom de famille en MAJUSCULES (convention pièce d'identité) const _np = (name || '').trim().split(/\s+/).filter(Boolean); const displayName = _np.length > 1 ? _np[0] + ' ' + _np.slice(1).join(' ').toLocaleUpperCase('fr') : name; // Partage public : numéro Pass et MRZ (zone lisible machine) sont confidentiels · on les masque const publicNumber = number.slice(0, 4) + ' •••• ••••'; const mrzMask = (s) => (redact ? s.replace(/[A-Z0-9]/g, '•') : s); // MRZ conforme à l'esprit ICAO 9303 : document + clé, nationalité FBL, // naissance + clé, sexe, expiration + clé, puis clé composite globale. const digits = number.replace(/\D/g, ''); const doc = ('FP' + digits).slice(0, 9); const dob = '970512'; const exp = '290611'; const mrz1 = ('P
Pass ID
Football digital passport
FOOTPASS® {tier ? {tier} : null}
{verified ? ( photo ? {name : initials ? {initials} : {name ) : ( )}
Name
{displayName || 'YOUR NAME'}
Role
{obRoleEn(role)}
{clubLabel}
{org || orgMissing || '-'}
{agentLabel}
{agent || '-'}
Pass No
{verified ? (redact ? publicNumber : number) : '•••• •••• ••••'}
{verified ? VERIFIED : INACTIVE}
{verified && (photo || !initials) ? : null} ); } // ── Champ à remplissage simulé (tap : le texte se tape tout seul) ── function ObField({ label, canned, mask, placeholder, hint, strength, onDone, onStart }) { const [n, setN] = React.useState(0); const [st, setSt] = React.useState('idle'); const [show, setShow] = React.useState(false); const start = () => { if (st !== 'idle') return; setSt('typing'); if (onStart) onStart(); let i = 0; const iv = setInterval(() => { i += 1; setN(i); if (i >= canned.length) { clearInterval(iv); setSt('done'); onDone && onDone(); } }, 38); }; const shown = mask && !show ? '•'.repeat(n) : canned.slice(0, n); const ratio = n / canned.length; return (
{label ?
{TX(label)}
: null}
{n === 0 ? {TX(placeholder)} : {shown}} {st === 'typing' ? : null} {st === 'done' && !mask ? : null} {mask && n > 0 ? ( ) : null}
{strength && n > 0 ? (
{[0.25, 0.5, 0.75, 1].map((t) => = t ? 'on' : ''}>)} {st === 'done' ? {TX('Solide')} : null}
) : null} {hint ?
{hint}
: null}
); } // ═══════ ÉCRAN · WELCOME ═══════ function ObStepWelcome({ ctx }) { const [toast, setToast] = React.useState(false); const login = () => { setToast(true); setTimeout(() => setToast(false), 2200); }; return (
FOOTPASS®

{TX('Parlez uniquement avec des profils vérifiés')}

{TX("10 jours offerts · 0 CHF aujourd'hui · sans engagement")}
{toast ? {TX("La connexion n'est pas couverte par ce prototype.")} : }
); } // ═══════ ÉCRAN · COMPTE (en premier) ═══════ function ObStepAccount({ ctx }) { const [done, setDone] = React.useState({ name: false, email: false, pwd: false }); const [kb, setKb] = React.useState(false); const ok = (k) => setDone((p) => { const n = { ...p, [k]: true }; // Dernier champ rempli : le clavier se range, le CTA réapparaît if (n.name && n.email && n.pwd) setTimeout(() => setKb(false), 450); return n; }); const all = done.name && done.email && done.pwd; return (

{TX('Créez votre compte')}

setKb(true)} onDone={() => ok('name')} /> {TX('Un email professionnel peut accélérer la validation de votre profil.')}} onStart={() => setKb(true)} onDone={() => ok('email')} /> setKb(true)} onDone={() => ok('pwd')} />
{TX('En continuant, vous acceptez les ')}{TX("Conditions d'utilisation")}{TX(' et la ')}{TX('Politique de confidentialité')}.
{/* Clavier iOS : monte dès qu'on tape, se range quand tout est rempli */}
); } // ═══════ ÉCRAN · RÔLE ═══════ function ObStepRole({ ctx }) { const [sel, setSel] = React.useState(ctx.d.roleChosen ? ctx.d.role : null); const [custom, setCustom] = React.useState(false); const [customDone, setCustomDone] = React.useState(false); // Verrou uniquement pendant l'avance (anti double-clic) : on peut toujours // changer d'avis, y compris en revenant en arrière depuis le plan const [advancing, setAdvancing] = React.useState(false); const pick = (r) => { if (advancing) return; if (r.id === sel) return; setSel(r.id); ctx.set('role', r.id); ctx.set('roleChosen', true); ctx.set('plan', 'pro'); if (r.id === 'autre') { setCustom(true); return; } setCustom(false); setCustomDone(false); ctx.set('roleCustom', null); setAdvancing(true); setTimeout(ctx.next, 340); }; return (
{TX('VOTRE PASS ID')}

{TX('Quel est votre rôle ?')}

{TX('Votre rôle détermine ce que votre Pass débloque.')}

{OB_ROLES.map((r) => ( ))}
{custom ? (
{ setCustomDone(true); ctx.set('roleCustom', 'Journaliste sportif'); }} />
) : null}
{custom ? (
) : null}
); } // ═══════ ÉCRAN · PLAN ═══════ function ObStepPlan({ ctx }) { const billing = ctx.d.billing; // PassPRO est la formule mise en avant pour tous les rôles : recommandée + pré-sélectionnée. const rec = 'pro'; const sel = ctx.d.plan || rec; return (

{TX('Choisissez votre Pass')}

{TX("10 jours d'essai offerts")}{TX(' · Sans engagement')}
{TX("0 CHF aujourd'hui")}

{OB_PLANS.map((p) => ( ))}
{TX('Vous représentez une structure ?')}{TX(" Créez d'abord votre Pass personnel · votre structure se crée ensuite dans l'app, au palier de votre staff (dès 499,99 CHF/an, essai 10 jours).")}
{TX("0 CHF aujourd'hui. Premier paiement uniquement après l'essai. Annulable à tout moment.")}
); } // ═══════ ÉCRAN · PAIEMENT ═══════ function ObPayFields({ onDone }) { const defs = [ { label: 'Numéro de carte', v: '4242 4242 4242 4242', ph: '1234 1234 1234 1234', full: true }, { label: 'Expiration', v: '08 / 29', ph: 'MM / AA' }, { label: 'CVC', v: '123', ph: '···' }, ]; const [prog, setProg] = React.useState([0, 0, 0]); const [st, setSt] = React.useState('idle'); const start = () => { if (st !== 'idle') return; setSt('typing'); let f = 0; let i = 0; const iv = setInterval(() => { i += 1; const fi = f; const val = Math.min(i, defs[fi].v.length); setProg((p) => { const np = [...p]; np[fi] = val; return np; }); if (i >= defs[f].v.length) { f += 1; i = 0; if (f >= defs.length) { clearInterval(iv); setSt('done'); onDone && onDone(); } } }, 30); }; return (
{defs.map((d, k) => (
{TX(d.label)}
= d.v.length ? 'done' : prog[k] > 0 ? 'typing' : 'idle'}`}> {prog[k] === 0 ? {TX(d.ph)} : {d.v.slice(0, prog[k])}} {prog[k] > 0 && prog[k] < d.v.length ? : null}
))}
); } function ObStepPay({ ctx }) { const plan = OB_PLAN_BY_ID[ctx.d.plan] || OB_PLAN_BY_ID.start; const price = ctx.d.billing === 'monthly' ? (window.FP_LANG === 'en' ? `CHF ${plan.m}/mo` : `${plan.m} CHF/mois`) : (window.FP_LANG === 'en' ? `CHF ${plan.y}/yr` : `${plan.y} CHF/an`); const [cardOk, setCardOk] = React.useState(false); const [paySt, setPaySt] = React.useState('idle'); // idle | proc | ok const [via, setVia] = React.useState(null); // 'apple' | 'card' const pay = (method) => { if (paySt !== 'idle') return; setVia(method); setPaySt('proc'); setTimeout(() => { setPaySt('ok'); setTimeout(ctx.next, 650); }, 1300); }; return (

{TX('10 jours gratuits')}
{TX("Aucun prélèvement aujourd'hui")}

{plan.name}{TX('Recommandé')}
{price}{TX(' après les 10 jours gratuits')}
{TX("Aujourd'hui")} · {obFrDate(0)}
{TX('Accès immédiat.')} {TX('0 CHF prélevé.')}
{TX('Jour 7')} · {obFrDate(7)}
{TX("Rappel envoyé avant la fin de l'essai.")}
{TX('Jour 10')} · {obFrDate(10)}
{TX('Premier paiement uniquement si vous continuez.')}
{/* Voie express · paiement en un geste, distincte de la saisie carte */}
{TX('OU PAR CARTE BANCAIRE')}
setCardOk(true)} />
{TX("Paiement sécurisé. Aucun prélèvement aujourd'hui. Annulable à tout moment.")}
); } Object.assign(window, { OBI, OB_ROLES, OB_ROLE_LABEL, OB_PLANS, OB_PLAN_BY_ID, obFrDate, ObRoleIcon, ObPassCard, ObField, ObStepWelcome, ObStepRole, ObStepPlan, ObStepPay, ObStepAccount, ObPayFields, });