/* screen_marketing_tutorial.jsx Sistema de Tutorial — Spotlight Tour v2 Estratégia: P1 (auto-onboarding 1ª visita) + P3 (sempre acessível via botão). Design: N2 (Confident Standard), T2 (4 divs backdrop), P2 (auto-position), W1+D1. NÃO usa emojis. NÃO usa import/export. NÃO usa process.env. */ // ── Steps por módulo ────────────────────────────────────────────────────────── const TUTORIAL_STEPS = { briefings: [ { id: 'select_brand_product', title: 'Seleccionar marca e produto', description: 'Clica em "+ Criar" para criar um novo briefing. Escolhe a marca (ex: Mimaki, BIOND, Decal) e o produto da base de dados no topo do formulário.', autoCheck: (s) => !!(s.briefing?.brand_id || s.briefing?.brand_slug), }, { id: 'fill_block1', title: 'Bloco 1 — Produto', description: 'Preenche o nome comercial, elevator pitch (proposta de valor resumida) e lista as USPs principais do produto. Mínimo 3 USPs para uma boa análise AI.', autoCheck: (s) => !!(s.briefing?.block1?.commercial_name && s.briefing?.block1?.elevator_pitch && s.briefing?.block1?.usps?.length > 0), }, { id: 'fill_block2_block3', title: 'Blocos 2 e 3 — Cliente e Mercado', description: 'Descreve o decisor de compra, o utilizador final e as dores do cliente (Bloco 2). Depois define a narrativa de posicionamento e os argumentos de diferenciação (Bloco 3).', autoCheck: (s) => !!(s.briefing?.block2?.decision_maker && s.briefing?.block3?.positioning_narrative), }, { id: 'fill_block4', title: 'Bloco 4 — Campanha', description: 'Define o objectivo da campanha, escolhe os canais (LinkedIn, Meta Ads, Email, etc.), escreve a mensagem-chave e define o período de duração.', autoCheck: (s) => !!(s.briefing?.block4?.objective && s.briefing?.block4?.key_message && s.briefing?.block4?.channels?.length > 0), }, { id: 'ai_analysis', title: 'Análise AI — score ≥ 80', description: 'Vai ao Bloco 6 e clica em "Analisar". A Digi AI avalia o briefing e sugere melhorias campo a campo. Aplica as sugestões até o score global atingir 80% ou mais.', autoCheck: (s) => (s.apreciation?.quality_score || 0) >= 80, }, { id: 'submit', title: 'Submeter para aprovação', description: 'Com score ≥ 80%, o botão "Submeter →" fica activo. Clica para enviar ao CEO para aprovação. O fluxo é sequencial: CEO aprova → Chairman aprova → Briefing pronto para campanha.', autoCheck: (s) => !!(s.briefing?.status && s.briefing.status !== 'rascunho' && s.briefing.status !== 'rejeitado'), }, { id: 'approved', title: 'Aprovação completa', description: 'Quando o briefing fica com status "Aprovado", já podes criar a campanha. Clica em "+ Criar Campanha" para avançar para o módulo Campanhas.', autoCheck: (s) => s.briefing?.status === 'aprovado' || s.briefing?.status === 'em_campanha', }, ], campanhas: [ { id: 'create_campaign', title: 'Criar campanha a partir de briefing', description: 'Clica em "+ Nova Campanha" para criar a tua primeira campanha a partir de um briefing aprovado. Todos os dados do briefing são transferidos automaticamente.', autoCheck: (s) => !!s.detail?.id, }, { id: 'generate_conceito', title: 'Gerar Conceito', description: 'Abre a campanha e vai ao tab Conceito. Clica em "Gerar Conceito" — a Digi AI vai criar a Big Idea, narrativa criativa, ângulos de mensagem e personas baseadas no briefing.', autoCheck: (s) => !!s.detail?.big_idea, }, { id: 'approve_conceito_canais', title: 'Aprovar Conceito e gerar Canais', description: 'Revê o conceito gerado. Se estiver bom, clica "Aprovar Conceito" → avança para o tab Canais. Clica "Gerar Setup de Canais" para a AI configurar audiências e formatos por canal.', autoCheck: (s) => !!s.detail?.canais_setup, }, { id: 'copy', title: 'Gerar e aprovar Copy', description: 'No tab Copy, clica "Gerar Copy" — a AI escreve copy específico para cada canal com specs de anúncio. Revê cada peça e aprova individualmente ou usa "Aprovar todos".', autoCheck: (s) => (s.detail?.copy?.length || 0) > 0 && (s.detail?.copy || []).every(c => c.status === 'aprovado'), }, { id: 'idiomas', title: 'Gerar Idiomas', description: 'No tab Idiomas, clica "Gerar Idiomas →" para traduzir o copy aprovado para Espanhol (e outros mercados configurados no briefing). Revê as traduções e aprova.', autoCheck: (s) => (s.detail?.idiomas?.length || 0) > 0, }, { id: 'prompts', title: 'Gerar e aprovar Prompts AI', description: 'No tab Prompts AI, clica "Gerar Prompts Visuais" — a AI cria prompts para FLUX (imagens) e Kling (vídeos) por canal. Aprova os prompts para avançar para Aprovação.', autoCheck: (s) => (s.detail?.prompts?.length || 0) > 0 && (s.detail?.prompts || []).every(p => p.status === 'aprovado'), }, { id: 'aprovacao', title: 'Aprovação Executiva', description: 'No tab Aprovação, Fábio Costa, Rui Leitão ou Armando Mota revêm a campanha completa (estratégia, conteúdo, calendarização) e clicam "Aprovar e Enviar para Produção" para avançar.', autoCheck: (s) => ['em_producao', 'publicado'].includes(s.detail?.status), }, { id: 'producao', title: 'Campanha em Produção', description: 'Com a campanha aprovada, o tab Produção mostra o estado de execução. O Módulo Produção de Conteúdos vai gerar os assets visuais (imagens e vídeos) com base nos prompts aprovados.', autoCheck: (s) => ['em_producao', 'publicado'].includes(s.detail?.status), }, ], }; // ── localStorage helpers ────────────────────────────────────────────────────── function getTutorialState(moduleName) { try { const raw = localStorage.getItem(`mkt-tutorial-${moduleName}`); return raw ? JSON.parse(raw) : { dismissed: false, manualChecks: [], firstSeen: null }; } catch { return { dismissed: false, manualChecks: [], firstSeen: null }; } } function saveTutorialState(moduleName, state) { try { localStorage.setItem(`mkt-tutorial-${moduleName}`, JSON.stringify(state)); } catch {} } // ── SVG Icons ───────────────────────────────────────────────────────────────── const IconBook = () => ( ); const IconCheck = ({ size = 14 }) => ( ); const IconX = ({ size = 14 }) => ( ); const IconCheckCircle = () => ( ); // ── computeCardPosition ─────────────────────────────────────────────────────── function computeCardPosition(targetRect, cardW, cardH, gap) { const vw = window.innerWidth; const vh = window.innerHeight; const clampY = (y) => Math.max(10, Math.min(y, vh - cardH - 10)); const clampX = (x) => Math.max(10, Math.min(x, vw - cardW - 10)); const midY = clampY(targetRect.top + targetRect.height / 2 - cardH / 2); const midX = clampX(targetRect.left + targetRect.width / 2 - cardW / 2); if (targetRect.right + gap + cardW < vw) return { left: targetRect.right + gap, top: midY, side: 'right' }; if (targetRect.left - gap - cardW > 0) return { left: targetRect.left - gap - cardW, top: midY, side: 'left' }; if (targetRect.bottom + gap + cardH < vh) return { top: targetRect.bottom + gap, left: midX, side: 'bottom' }; if (targetRect.top - gap - cardH > 0) return { top: targetRect.top - gap - cardH, left: midX, side: 'top' }; return { top: vh / 2 - cardH / 2, left: vw / 2 - cardW / 2, side: 'center' }; } // ── MktSpotlightTour ────────────────────────────────────────────────────────── const SPOTLIGHT_PADDING = 10; const CARD_W = 320; const CARD_H = 240; const CARD_GAP = 20; const MktSpotlightTour = ({ steps, currentIdx, totalSteps, onNext, onPrev, onSkip }) => { const [targetRect, setTargetRect] = React.useState(null); const currentStep = steps[currentIdx] || null; React.useEffect(() => { if (!currentStep) { setTargetRect(null); return; } const update = () => { const el = document.querySelector(`[data-tutorial-step="${currentStep.id}"]`); if (!el) { setTargetRect(null); return; } el.scrollIntoView({ behavior: 'smooth', block: 'center' }); setTimeout(() => { const r = el.getBoundingClientRect(); setTargetRect({ top: r.top, left: r.left, width: r.width, height: r.height, bottom: r.bottom, right: r.right }); }, 320); }; update(); window.addEventListener('resize', update); return () => window.removeEventListener('resize', update); }, [currentIdx, currentStep?.id]); const P = SPOTLIGHT_PADDING; const pos = targetRect ? computeCardPosition(targetRect, CARD_W, CARD_H, CARD_GAP) : { top: window.innerHeight / 2 - CARD_H / 2, left: window.innerWidth / 2 - CARD_W / 2, side: 'center', }; return ( <> {/* Backdrop — 4 divs */} {targetRect ? ( <>
{/* Ring */}
) : (
)} {/* Step Card */} {currentStep && (
{/* Header */}
PASSO {currentIdx + 1} DE {totalSteps}
{/* Title */}
{currentStep.title}
{/* Description */}
{currentStep.description}
{/* Progress bar */}
{steps.map((_, i) => (
))}
{/* Buttons */}
{currentIdx > 0 && ( )}
)} ); }; // ── MktTutorialWelcome ──────────────────────────────────────────────────────── const MktTutorialWelcome = ({ moduleLabel, stepCount, userName, onStart, onSkip }) => { const firstName = userName ? userName.split(' ')[0] : null; return (
{/* Badge */}
TUTORIAL — {moduleLabel.toUpperCase()}
{/* Title */}

{firstName ? `Olá, ${firstName}.` : 'Bem-vindo.'}

{/* Description */}

Vou guiar-te pelos {stepCount} passos para usares os {moduleLabel} como é suposto. Demora menos de 2 minutos.

{/* Buttons */}
); }; // ── MktTutorialCelebration ──────────────────────────────────────────────────── const MktTutorialCelebration = ({ moduleLabel, onClose }) => { const CONFETTI_COLORS = ['#3859D0', '#22c55e', '#f59e0b', '#ec4899', '#8b5cf6']; const pieces = React.useMemo(() => Array.from({ length: 15 }, (_, i) => ({ id: i, left: `${5 + Math.random() * 90}%`, color: CONFETTI_COLORS[i % CONFETTI_COLORS.length], duration: 1.8 + Math.random() * 0.8, delay: Math.random() * 0.4, rotate: Math.random() > 0.5, })), [] ); return ( <> {/* Confetti */}
{pieces.map(p => (
))}
{/* Success modal */}

Módulo dominado!

Completaste todos os passos dos {moduleLabel}. Podes usar o botão Guia sempre que precisares de rever.

); }; // ── MktTutorialDrawer ───────────────────────────────────────────────────────── const MktTutorialDrawer = ({ moduleName, moduleLabel, steps, doneSet, onManualCheck, onDismiss, onMarkAllDone, onReset, onClose, onRestartTour }) => { const total = steps.length; const doneCount = steps.filter(s => doneSet.has(s.id)).length; const pct = Math.round((doneCount / total) * 100); const allDone = doneCount === total; const getStatus = (step) => { if (doneSet.has(step.id)) return 'done'; const firstPending = steps.find(s => !doneSet.has(s.id)); return firstPending?.id === step.id ? 'current' : 'future'; }; return ( <>
{/* Header */}
GUIA PASSO A PASSO
{moduleLabel}
{allDone ? 'Concluído!' : `${doneCount} de ${total} passos`} {pct}%
{/* Steps */}
{steps.map(step => { const status = getStatus(step); const isDone = status === 'done'; const isCurrent = status === 'current'; return (
{isDone ? :
}
{step.title}
{isCurrent && ( <>
{step.description}
{!isDone && } )}
); })}
{/* Footer */}
{!allDone && ( )} {!allDone && ( )}
); }; // ── MktTutorial (componente principal) ──────────────────────────────────────── const MktTutorial = ({ moduleName, moduleLabel, moduleState = {}, userEmail }) => { const steps = TUTORIAL_STEPS[moduleName] || []; const [open, setOpen] = React.useState(false); const [tourActive, setTourActive] = React.useState(false); const [welcomeOpen, setWelcomeOpen] = React.useState(false); const [tourStepIdx, setTourStepIdx] = React.useState(0); const [celebrating, setCelebrating] = React.useState(false); const [showTooltip, setShowTooltip] = React.useState(false); const [tutState, setTutState] = React.useState(() => getTutorialState(moduleName)); if (!steps.length) return null; // Conjunto de steps concluídos const doneSet = React.useMemo(() => { const s = new Set(tutState.manualChecks || []); steps.forEach(step => { try { if (step.autoCheck && step.autoCheck(moduleState)) s.add(step.id); } catch {} }); return s; }, [steps, tutState.manualChecks, moduleState]); const pendingCount = steps.length - doneSet.size; const allDone = pendingCount === 0; // Índice do primeiro step pendente (para retomar tour) const firstPendingIdx = React.useMemo(() => steps.findIndex(s => !doneSet.has(s.id)), [steps, doneSet] ); // P1: auto-open welcome na 1ª visita React.useEffect(() => { if (!tutState.firstSeen && !tutState.dismissed && pendingCount > 0) { const newState = { ...tutState, firstSeen: Date.now() }; setTutState(newState); saveTutorialState(moduleName, newState); setTimeout(() => setWelcomeOpen(true), 800); } }, []); const handleDismiss = () => { const s = { ...tutState, dismissed: true }; setTutState(s); saveTutorialState(moduleName, s); setOpen(false); setTourActive(false); setWelcomeOpen(false); }; const handleManualCheck = (stepId) => { const s = { ...tutState, manualChecks: [...new Set([...(tutState.manualChecks || []), stepId])] }; setTutState(s); saveTutorialState(moduleName, s); }; const handleMarkAllDone = () => { const s = { ...tutState, manualChecks: steps.map(st => st.id), dismissed: true }; setTutState(s); saveTutorialState(moduleName, s); setOpen(false); }; const handleReset = () => { const s = { dismissed: false, manualChecks: [], firstSeen: null }; setTutState(s); saveTutorialState(moduleName, s); setOpen(false); setTourActive(false); }; const startTour = () => { setWelcomeOpen(false); setOpen(false); setTourStepIdx(firstPendingIdx >= 0 ? firstPendingIdx : 0); setTourActive(true); }; const handleTourNext = () => { if (tourStepIdx < steps.length - 1) { setTourStepIdx(i => i + 1); } else { setTourActive(false); setCelebrating(true); } }; const handleTourPrev = () => { if (tourStepIdx > 0) setTourStepIdx(i => i - 1); }; const handleTourSkip = () => { setTourActive(false); const s = { ...tutState, dismissed: true }; setTutState(s); saveTutorialState(moduleName, s); }; const handleFloatingClick = () => { if (allDone) { setOpen(true); return; } setTourStepIdx(firstPendingIdx >= 0 ? firstPendingIdx : 0); setTourActive(true); }; return ( <> {/* Welcome modal — 1ª visita */} {welcomeOpen && ( )} {/* Spotlight tour activo */} {tourActive && !welcomeOpen && ( )} {/* Celebration */} {celebrating && ( setCelebrating(false)} /> )} {/* Drawer lateral (referência) */} {open && !tourActive && !welcomeOpen && ( setOpen(false)} onRestartTour={startTour} /> )} {/* Floating button — bottom-right */} {!tourActive && !welcomeOpen && !open && (
setShowTooltip(true)} onMouseLeave={() => setShowTooltip(false)} > {showTooltip && (
{allDone ? 'Ver guia' : 'Retomar tour'}
)}
)} {/* CSS global */} ); }; window.MktTutorial = MktTutorial;