/* ============ Genius — CONNEXIONS PUBLICITAIRES Meta Ads / Google Ads (20/09/2026) ============ AdsConnections : Réglages → connexion OAuth officielle par espace, sélection des comptes, statut, déconnexion. AdsPanel : onglet « Publicité » d'une campagne → lecture (dépenses, impressions, clics, conversions, coût/résultat, période, devise, fraîcheur, définition des conversions — Meta et Google côte à côte, jamais additionnés), rattachement, suggestions (faits / hypothèses), suivi & UTM, brouillons d'annonces, publication contrôlée (récapitulatif + validation, création EN PAUSE). AdDraftEditor : brouillon Meta ou Google avec les champs et limites réels de chaque plateforme. Secrets et jetons côté serveur uniquement. */ const adPost = (action, body) => fetch(GAPI() + '?action=' + action, { method: 'POST', headers: GHEAD(), body: JSON.stringify(Object.assign({ tenant: window.geniusTenant() }, body)) }).then(r => r.json()); const AD_STATUS = { local_draft: ['Brouillon local', 'muted'], creating: ['Création…', 'run'], created_paused: ['Créée sur la plateforme · en pause', 'wait'], in_review: ['En examen', 'wait'], active: ['Active', 'ok'], error: ['Erreur', 'err'] }; const adFmtN = n => (n == null || isNaN(Number(n))) ? '—' : Number(n).toLocaleString('fr-FR', { maximumFractionDigits: 1 }); const adFmtMoney = (n, cur) => (n == null || isNaN(Number(n))) ? '—' : Number(n).toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' ' + (cur === 'EUR' ? '€' : (cur || '')); const adLen = (s, max) => max ? ' over' : '')}>{String(s || '').length}/{max}; function AdModeBadge({ mode }) { if (mode === 'mock') return Mode test · données simulées; if (mode === 'live') return Plateformes réelles; return Applications non configurées; } /* ---------- Réglages : connexions par espace ---------- */ function AdsConnections() { const [st, setSt] = React.useState(null); const [err, setErr] = React.useState(''); const [busy, setBusy] = React.useState(''); const load = React.useCallback(() => adPost('ads_status', {}).then(j => { if (j && j.ok) setSt(j); else setErr((j && j.error) || 'erreur'); }).catch(() => setErr('réseau')), []); const popupRef = React.useRef(null); React.useEffect(() => { load(); const onMsg = e => { if (!e.data || !e.data.genius_ads) return; let apiOrigin = ''; try { apiOrigin = new URL(window.GENIUS_API || '', location.href).origin; } catch (_) {} if (e.origin !== apiOrigin || (popupRef.current && e.source !== popupRef.current)) return; /* (audit C-A27) origine + fenêtre vérifiées */ load(); if (e.data.genius_ads === 'error') setErr(e.data.message || 'connexion refusée'); }; window.addEventListener('message', onMsg); return () => window.removeEventListener('message', onMsg); }, [load]); const connect = p => { setBusy(p); setErr(''); const w = window.open('about:blank', 'genius_ads_oauth', 'width=560,height=720'); popupRef.current = w; /* (audit C-A28) ouverte pendant le clic, naviguée ensuite */ adPost('ads_oauth_start', { platform: p }).then(j => { if (!j || !j.ok) { if (w) w.close(); setErr((j && (j.message || j.error)) || 'connexion impossible'); return; } if (j.connected) { if (w) w.close(); load(); return; } if (w) w.location.href = j.url; else setErr('Autorisez les fenêtres surgissantes pour vous connecter.'); }).catch(() => { if (w) w.close(); setErr('réseau'); }).finally(() => setBusy('')); }; const disconnect = p => { if (!window.confirm('Déconnecter cette plateforme de cet espace ? Les rattachements et brouillons restent, mais plus aucune donnée ne sera lue.')) return; adPost('ads_disconnect', { platform: p }).then(load); }; const refresh = p => { setBusy(p + ':r'); adPost('ads_refresh_accounts', { platform: p }).then(j => { if (j && !j.ok) setErr(j.error || 'vérification impossible'); load(); }).catch(() => setErr('réseau')).finally(() => setBusy('')); }; const select = (p, ids) => { setSt(x => x ? { ...x, platforms: x.platforms.map(q => q.platform === p ? { ...q, selected: ids } : q) } : x); adPost('ads_select_accounts', { platform: p, selected: ids }).then(load).catch(() => setErr('réseau')); }; /* (audit C-A29) */ if (err && !st) return
Connexions non chargées : {err}
; if (!st) return ; return
{st.message || 'Chaque espace de travail connecte ses propres comptes. Les jetons restent sur le serveur, chiffrés.'}
{err &&
{err}
} {st.platforms.map(p => { const conn = p.status === 'connected'; return
{p.label}
{conn ? <>Connecté{p.user ? ' · ' + p.user : ''}{p.connected_at ? ' · le ' + new Date(p.connected_at).toLocaleDateString('fr-FR') : ''}{p.expires_at ? ' · autorisation jusqu’au ' + new Date(p.expires_at).toLocaleDateString('fr-FR') : ''}{p.mock ? ' · simulé' : ''} : p.status === 'expired' ? Autorisation expirée ou révoquée — reconnectez-vous. : p.status === 'error' ? {p.error || 'erreur'} : 'Non connecté'}
{conn ? <> refresh(p.platform)} disabled={busy === p.platform + ':r'}>Vérifier disconnect(p.platform)}>Déconnecter : connect(p.platform)} disabled={!p.app_configured || busy === p.platform}>{p.status === 'expired' ? 'Reconnecter' : 'Connecter'}}
{!p.app_configured &&
{st.requirements[p.platform]}{st.native ? ' Renseignez l’application ci-dessous (identifiants serveur).' : ''}
} {conn &&
Comptes autorisés dans Genius ({p.selected.length}/{p.accounts.length}) — seuls les comptes cochés sont lus et utilisables.
{!p.accounts.length &&
Aucun compte publicitaire accessible avec cette autorisation.{p.error ? ' ' + p.error : ''}
} {p.accounts.map(a => { const on = p.selected.includes(a.id); return ; })}
Autorisations accordées : {(p.scopes || []).join(', ') || '—'}{p.checked_at ? ' · vérifié le ' + new Date(p.checked_at).toLocaleString('fr-FR', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' }) : ''}
}
; })} {st.native && }
; } /* identifiants d'application (Groupe Verlaine uniquement) : Meta app_id/secret, client OAuth Google, mode */ function AdsAppsConfig({ onChange }) { const [c, setC] = React.useState(null); const [form, setForm] = React.useState({ meta: {}, google: {} }); const [msg, setMsg] = React.useState(''); const load = () => adPost('ads_config', {}).then(j => { if (j && j.ok) setC(j); }); React.useEffect(() => { load(); }, []); if (!c) return null; const save = (set) => adPost('ads_config', { set }).then(j => { if (j && j.ok) { setC(j); setForm({ meta: {}, google: {} }); setMsg('Enregistré.'); setTimeout(() => setMsg(''), 2500); onChange && onChange(); } else setMsg((j && j.error) || 'erreur'); }); return
Applications publicitaires (identifiants serveur, Groupe Verlaine)
URL de redirection OAuth à déclarer dans les deux consoles : {c.redirect_uri}
Mode
{[['live', 'Plateformes réelles'], ['mock', 'Mode test (simulé)'], ['off', 'Désactivé']].map(([k, l]) => )}
Meta (Graph {c.meta.version})
Permissions demandées : {c.meta.scopes.join(', ')}. App Review + vérification d’entreprise nécessaires pour les comptes d’autres entreprises.
setForm(f => ({ ...f, meta: { ...f.meta, app_id: v } }))} /> setForm(f => ({ ...f, meta: { ...f.meta, app_secret: v } }))} placeholder={c.meta.has_secret ? '••••••••' : ''} /> save({ meta: { app_id: form.meta.app_id != null ? form.meta.app_id : c.meta.app_id, app_secret: form.meta.app_secret || 'GNSKEEP' } })}>Enregistrer Meta
Google Ads (API {c.google.version})
Client OAuth d’un projet Google Cloud inscrit à l’API Google Ads (Explorer → Basic après vérification de marque). Scope : {c.google.scope}. Developer token facultatif depuis le 09/09/2026.
setForm(f => ({ ...f, google: { ...f.google, client_id: v } }))} placeholder={c.google.client_id ? '' : 'xxxx.apps.googleusercontent.com'} /> setForm(f => ({ ...f, google: { ...f.google, client_secret: v } }))} placeholder={c.google.has_secret ? '••••••••' : ''} /> setForm(f => ({ ...f, google: { ...f.google, login_customer_id: v } }))} /> save({ google: { client_id: form.google.client_id != null ? form.google.client_id : 'GNSKEEP', client_secret: form.google.client_secret || 'GNSKEEP', login_customer_id: form.google.login_customer_id != null ? form.google.login_customer_id : c.google.login_customer_id } })}>Enregistrer Google
{msg &&
{msg}
}
; } /* ---------- Brouillon d'annonce : champs et limites réels par plateforme ---------- */ function AdDraftEditor({ campaignId, draft, specs, status, onChange, onClose, onPublished }) { const [d, setD] = React.useState(draft); const [busy, setBusy] = React.useState(''); const [err, setErr] = React.useState(''); const [recap, setRecap] = React.useState(null); const conn = (status && status.platforms || []).find(p => p.platform === d.platform) || {}; const accounts = (conn.accounts || []).filter(a => (conn.selected || []).includes(a.id)); const locked = !['local_draft', 'error'].includes(d.status); /* (audit C-A5) : état local immédiat, patches accumulés, une seule écriture toutes les 600 ms, sérialisée ; la publication attend le flush */ const pend = React.useRef({}); const timer = React.useRef(null); const chain = React.useRef(Promise.resolve()); const [saveState, setSaveState] = React.useState(''); const flush = React.useCallback(() => { const patch = pend.current; pend.current = {}; if (!Object.keys(patch).length) return chain.current; chain.current = chain.current.then(() => { setSaveState('saving'); return adPost('ads_draft_save', { campaign_id: campaignId, draft_id: d.id, draft: patch }).then(j => { if (j && j.ok) { setSaveState('saved'); onChange && onChange(j.drafts); } else { setSaveState('error'); setErr((j && j.error) || 'sauvegarde impossible'); } }).catch(() => { setSaveState('error'); setErr('réseau'); }); }); return chain.current; }, [campaignId, d.id]); const save = (patch) => { setD(x => ({ ...x, ...patch })); Object.assign(pend.current, patch); clearTimeout(timer.current); timer.current = setTimeout(flush, 600); }; React.useEffect(() => () => { clearTimeout(timer.current); flush(); }, [flush]); const askPublish = () => { setBusy('recap'); setErr(''); clearTimeout(timer.current); flush().then(() => adPost('ads_publish', { campaign_id: campaignId, draft_id: d.id })).then(j => { if (j && j.ok && j.recap) setRecap(j.recap); else setErr((j && j.error) || 'récapitulatif impossible'); }).catch(() => setErr('réseau')).finally(() => setBusy('')); }; const publish = () => { setBusy('publish'); adPost('ads_publish', { campaign_id: campaignId, draft_id: d.id, confirmed: true }).then(j => { setBusy(''); setRecap(null); if (j && j.ok) { setD(j.draft); onPublished && onPublished(j.draft); } else { setErr((j && j.error) || 'création impossible'); if (j && j.draft) setD(j.draft); } }).catch(() => { setBusy(''); setErr('réseau'); }); }; const [lbl, tone] = AD_STATUS[d.status] || [d.status, 'muted']; const sp = specs || {}; const listField = (label, key, arr, max, minCount, maxCount, path) =>
{label} {arr.length}/{maxCount} · ≤ {max} car.{minCount ? ' · min ' + minCount : ''}{arr.map((v, i) =>
{ const a = arr.slice(); a[i] = e.target.value; path(a); }} />{adLen(v, max)}{!locked && }
)}{!locked && arr.length < maxCount && }
; return
{d.platform === 'meta' ? 'Annonce Meta Ads' : 'Campagne Google Ads'} {lbl}
{d.platform === 'meta' ? 'Objectif, texte, bouton et destination — placements selon le média.' : 'Groupe d’assets (Demand Gen / Performance Max) + annonce Search responsive — structures propres à Google.'}{d.remote && d.remote.mock ? ' · création simulée' : ''}
{onClose && Fermer}
{d.error &&
{d.error}
} {(d.warnings || []).map((w, i) =>
{w}
)}
{d.platform === 'meta' ? <>
Objectif
{Object.entries(sp.objectives || {}).filter(([k]) => ['OUTCOME_LEADS', 'OUTCOME_TRAFFIC'].includes(k)).map(([k, l]) => )}
Texte principal {adLen(d.creative.primary_text, 125)}