// Testing Ads — écrans secondaires (Détail vidéo, Ad Live, Fiche influenceuse) const { Avatar, StatusPill, FilterPill, Btn, Thumb, PromoCode, Card } = window.WF; const { KillModal, PushMetaModal } = window.TA_MODALS; const { TA_FORMAT, TA_STATUS_META } = window; // ——— Back bar ——— function BackBar({ to = 'Pipeline', onBack, right }) { return (
← {to} {right}
); } // ——— Détail vidéo (desktop) ——— function DetailScreen({ video, isMobile, onBack, onOpenInfluencer, onOpenAdLive, dispatch }) { const [pushTarget, setPushTarget] = React.useState(null); const [killTarget, setKillTarget] = React.useState(null); if (!video) return null; const inf = window.TA_INFLUENCERS[video.inf]; const status = TA_STATUS_META[video.status]; const hooks = window.TA_HOOKS_FOR(video.id); const brief = window.TA_BRIEF_FOR(video.id); const transcript = window.TA_TRANSCRIPT_FOR(video.id); // Action principale (CTA contextuel) const cta = (() => { if (video.status === 'toEdit') return ( dispatch({ type: 'moveTo', id: video.id, status: 'editing', extra: { takenBy: 'Katlyn', takenHoursAgo: 0 } })}> Je prends ce montage ); if (video.status === 'editing') return ( ↑ Déposer le final ); if (video.status === 'edited') return ( setPushTarget({ video, mode: 'push' })}>📡 Pousser en testing ); if (video.status === 'testing') return (
setPushTarget({ video, mode: 'scale' })}>✓ Scaler setKillTarget(video)}>✗ Killer onOpenAdLive(video)}>📡 Voir live →
); return null; })(); // —— Mobile layout (Katlyn dans CapCut) if (isMobile) { return (
{status.short}
} /> {/* En-tête mobile compact */}
{inf.handle} onOpenInfluencer(inf)}>↗
{inf.name}
{/* Code promo géant copyable */}
Code promo · tape pour copier
{inf.code}
 {/* Vidéo source */}
tc visible 1× ↓ .mov
{/* CTA mobile en haut, gros */}
{cta && React.cloneElement(cta, { style: { width: '100%', minHeight: 48, ...(cta.props.style || {}) } })}
↓ Kit complet (.zip · 47 Mo) {/* Hooks mobiles (gros boutons tap) */}
3 hooks candidats
{hooks.map((h, i) => ( {h.tc} {h.text} ⧉ ))} {/* Brief */}
Brief
« {brief.angle} »
✓ MENTIONNER
{brief.mentions_obligatoires.map(m => {m})}
✗ ÉVITER
{brief.mentions_a_eviter.map(m => {m})}
durée cible {brief.duree_cible} · contrat {brief.contract}
{/* Transcription complète */}
Transcription complète
{transcript.map((l, i) => (
{l.tc} {l.text}
))}
setPushTarget(null)} onConfirm={() => { dispatch({ type: 'moveTo', id: video.id, status: pushTarget.mode === 'scale' ? 'scaled' : 'testing' }); setPushTarget(null); }} /> setKillTarget(null)} onConfirm={({ reason, comment }) => { dispatch({ type: 'moveTo', id: video.id, status: 'killed', extra: { killReason: reason, killNote: comment } }); setKillTarget(null); onBack(); }} /> ); } // —— Desktop layout return (
contrat {brief.contract} {status.label} } /> {/* Header */}

{inf.handle} onOpenInfluencer(inf)}>↗

{inf.name} · reçue {TA_FORMAT.age(video.receivedHours)} · source {video.dur} · onOpenInfluencer(inf)}>fiche influenceuse
Code promo
 {/* Grid */}
{/* Gauche */}
{/* Vidéo source */}
tc visible vitesse 1× ↓ source .mov
{/* Workflow */}
Workflow
{(() => { const order = ['source','kit','toEdit','editing','edited','testing']; const cur = order.indexOf(video.status); return order.map((s, i, a) => { const m = TA_STATUS_META[s]; const done = i < cur; const current = i === cur; return (
{done ? '✓' : current ? '·' : i+1}
{m.short}
{m.who}
{i < a.length - 1 &&
} ); }); })()}
{/* Action principale */} {cta &&
{cta} {video.status !== 'testing' && ↓ Kit complet (.zip · 47 Mo)}
}
{/* Droite */}
{/* Hooks */}
3 hooks candidats classés par perf attendue
{hooks.map((h, i) => (
{h.tc} {h.text} ⧉
))}
{/* Brief */}
Brief — angle vendu
« {brief.angle} »
✓ MENTIONNER
{brief.mentions_obligatoires.map(m =>
{m}
)}
✗ ÉVITER
{brief.mentions_a_eviter.map(m =>
{m}
)}
durée cible {brief.duree_cible} · contrat {brief.contract} · ouvrir →
{/* Transcription complète */}
Transcription cliquer un timecode → vidéo
{transcript.map((l, i) => (
{l.tc} {l.text}
))}
setPushTarget(null)} onConfirm={() => { dispatch({ type: 'moveTo', id: video.id, status: pushTarget.mode === 'scale' ? 'scaled' : 'testing' }); setPushTarget(null); }} /> setKillTarget(null)} onConfirm={({ reason, comment }) => { dispatch({ type: 'moveTo', id: video.id, status: 'killed', extra: { killReason: reason, killNote: comment } }); setKillTarget(null); onBack(); }} />
); } // ——— Ad Live — vue d'une ad en testing avec KPI live ——— function AdLiveScreen({ video, onBack, onOpenInfluencer, dispatch }) { const [pushTarget, setPushTarget] = React.useState(null); const [killTarget, setKillTarget] = React.useState(null); if (!video) return null; const inf = window.TA_INFLUENCERS[video.inf]; const k = video.kpi || {}; const signal = k.signal; // Sparkline placeholder (SVG) const sparkline = (color = 'var(--primary)') => ( ); return (
Meta · camp #{video.metaCampaign} · ouvrir dans Ads Manager ↗ } /> {/* Header avec signal */}

{inf.handle}

En testing · J{video.daysLive}
{inf.name} · pousseé par Benjamin il y a {video.daysLive}j · audience FR · Femmes 22-38
Code promo
 {/* Recommandation */} {signal && ( {signal === 'scale' ? '↑' : '↓'}
{signal === 'scale' ? 'Signal scale — perf au-dessus du seuil' : 'Signal kill — perf en-dessous du seuil'}
{signal === 'scale' ? `CPA ${k.cpa} < cible 25€ · ROAS ${k.roas} > 1.5. Recommandé : ×3 le budget.` : `CPA ${k.cpa} > cible 25€ · ROAS ${k.roas} < 1.0. Recommandé : killer la créa.`}
{signal === 'scale' ? setPushTarget({ video, mode: 'scale' })}>🚀 Scaler : setKillTarget(video)}>❌ Killer} )} {/* KPI grid */}
{[ { lbl: 'CTR', val: k.ctr, sub: 'cible · 2,0%', good: signal === 'scale' }, { lbl: 'CPA', val: k.cpa, sub: 'cible · 25€', good: signal === 'scale' }, { lbl: 'ROAS', val: k.roas, sub: 'cible · 1,5', good: signal === 'scale' }, { lbl: 'Spend', val: k.spend, sub: `budget 12€/j` }, ].map(m => (
{m.lbl}
{m.val}
{m.sub}
{sparkline(m.good !== undefined ? (m.good ? '#16a34a' : '#dc2626') : 'var(--primary)')}
 ))}
{/* Détails secondaires */}
{/* Activity log */}
Historique de la campagne
{[ { t: `J${video.daysLive}, 14h`, evt: `Mise à jour KPI auto — CPA ${k.cpa}, CTR ${k.ctr}` }, { t: `J${video.daysLive-1}, 09h`, evt: 'Première vente détectée — code utilisé' }, { t: 'J0, 18h', evt: 'Campagne lancée par Benjamin', who: 'Benjamin' }, { t: 'J0, 18h', evt: 'Audience · FR Femmes 22-38 · 1,8M', who: 'preset' }, ].map((l, i) => (
{l.t} {l.evt} {l.who && · {l.who}}
))}
{/* Audience + créa */}
Audience & créa
FR · Femmes 22-38 · bijoux & mode
~1,8M personnes · {k.impressions} impressions servies
Voir la créa → Voir audience Meta ↗
setPushTarget(null)} onConfirm={() => { dispatch({ type: 'moveTo', id: video.id, status: 'scaled' }); setPushTarget(null); onBack(); }} /> setKillTarget(null)} onConfirm={({ reason, comment }) => { dispatch({ type: 'moveTo', id: video.id, status: 'killed', extra: { killReason: reason, killNote: comment } }); setKillTarget(null); onBack(); }} />
); } // ——— Fiche influenceuse (similaire à Annuaire) ——— function InfluencerScreen({ influencer, allVideos, onBack, onOpenVideo }) { if (!influencer) return null; const inf = influencer; const handleKey = inf.handle.replace('@', '').replace(/[.]/g, '.'); const herVideos = allVideos.filter(v => window.TA_INFLUENCERS[v.inf]?.handle === inf.handle); return (
Ouvrir dans Annuaire ↗ } /> {/* Header */}

{inf.name}

{inf.handle} Active
{inf.tier} · ouverte aux co-créations · dernière activité il y a 1 jour
Code promo
{/* Stats grid */}
{[ { lbl: 'Abonnés', val: inf.abonnes }, { lbl: 'ER', val: inf.er }, { lbl: 'Vidéos faites', val: inf.videos }, { lbl: 'CA généré', val: inf.ca }, ].map(m => (
{m.lbl}
{m.val}
))}
{/* Ses vidéos */}
Ses vidéos dans Testing Ads · {herVideos.length}
{herVideos.length === 0 && ( Aucune vidéo en pipeline. )} {herVideos.map(v => { const s = TA_STATUS_META[v.status]; return ( onOpenVideo(v)}>
{s.short}
reçue {TA_FORMAT.age(v.receivedHours)}{v.kpi && ` · CTR ${v.kpi.ctr}`}
); })}
); } window.TA_SCREENS = { DetailScreen, AdLiveScreen, InfluencerScreen, BackBar };