// ------------------------------------------------------------------------- // EDITOR EM USO // // Destino: /lp/components/middle.jsx // Protótipo: lab/protos/editor-em-uso.html · Ficha: refs/editor-em-uso/ficha.md // GERADO por tools/portar.py — edite o protótipo e rode de novo. // // Ícones: use `II` (window.Icon), já aliasado no topo de middle.jsx. // Tudo vive numa IIFE porque os arquivos de /lp/components/ dividem o // mesmo escopo global — nomes soltos colidem entre si. // ------------------------------------------------------------------------- (function () { // Em produção este arquivo entra em middle.jsx, onde o alias já é `II`. const II = window.Icon; // Olho de "Ver prévia" não existe no set — inline, como o boleto no hero.jsx. const IconeOlho = (p) => ( ); // Categorias da Biblioteca de blocos, com as contagens reais do editor. const CATEGORIAS = [ { n:'Conversão & gatilhos', q:11, cor:'#f59e0b', bg:'#fffbeb', ic: }, { n:'Diferenciais únicos', q:12, cor:'#e11d48', bg:'#fff1f2', ic: }, { n:'Confiança', q:5, cor:'#16a34a', bg:'#f0fdf4', ic: }, { n:'Personalizar', q:6, cor:'#7c3aed', bg:'#f5f3ff', ic: }, ]; // Os 5 essenciais, com os textos exatos do app. const ESSENCIAIS = [ { n:'Cabeçalho da loja', d:'Logo + selo de segurança.', ic: }, { n:'Identificação', d:'CPF/CNPJ, nome, e-mail e telefone.', ic: }, { n:'Endereço', d:'CEP, rua, número, bairro, cidade.', ic: }, { n:'Métodos de pagamento', d:'PIX, cartão, boleto. Ordem configurável no tema.', ic: }, { n:'Resumo do pedido', d:'Itens, frete e total. Atualiza ao mudar pagamento.',ic: }, ]; // Os 11 de "Conversão & gatilhos" — nomes e descrições reais. const BLOCOS_CONVERSAO = [ { n:'Express Checkout', d:'Apple Pay, Google Pay e 1-clique no topo.', ic: }, { n:'Escassez', d:'Apenas X unidades restantes!', ic: }, { n:'Contador de urgência', d:'Timer regressivo para promoções limitadas.', ic: }, { n:'Prova social ao vivo', d:'Toast: Maria de SP comprou há 3 min.', ic: }, { n:'Barra de frete grátis',d:'Faltam R$ 50 para frete grátis (com progresso).', ic: }, { n:'Cupom desbloqueável', d:'Campo de cupom com animação ao aplicar.', ic: }, { n:'Oferta ao sair', d:'Quando o cliente tenta sair, abre um pop-up com cupom.',ic: }, { n:'Roleta de brindes', d:'Roleta gamificada: o cliente gira e ganha um cupom.', ic: }, { n:'Barra de estoque', d:'Visualiza % do estoque já vendido.', ic: }, { n:'Avaliações inline', d:'Estrelas + número de avaliações.', ic: }, { n:'Comparativo de preço', d:'Você economiza R$ X vs o concorrente.', ic: }, ]; const ARRASTADO = 4; // Barra de frete grátis // Templates por nicho — vêm ANTES dos presets no painel real. const NICHOS = [ { n:'Moda Feminina', a:'#f43f5e', b:'#111827', bg:'#fff1f2' }, { n:'Moda Masculina', a:'#1e3a8a', b:'#111827', bg:'#eff6ff' }, { n:'Pet', a:'#16a34a', b:'#111827', bg:'#f0fdf4' }, { n:'Ferramentas', a:'#111827', b:'#111827', bg:'#fff' }, { n:'Acessórios', a:'#7c3aed', b:'#111827', bg:'#f5f3ff' }, { n:'Vestuário Geral', a:'#111827', b:'#111827', bg:'#fff' }, ]; const PRESETS = [ { n:'Violeta (padrão)', a:'#7c3aed', b:'#111827' }, { n:'Minimalista', a:'#111827', b:'#111827' }, { n:'Premium', a:'#7c3aed', b:'#111827', bg:'#f5f3ff' }, { n:'Noturno', a:'#a78bfa', b:'#ffffff', escuro:true }, { n:'Esmeralda', a:'#16a34a', b:'#111827', bg:'#f0fdf4' }, { n:'Coral', a:'#f43f5e', b:'#111827', bg:'#fff1f2' }, ]; const PRESET_ALVO = 3; // Noturno // 0 repouso · 1 cursor→categoria · 2 clique abre a lista · 3 cursor→bloco // 4 pega · 5 arrasta até a lousa · 6 zona destaca · 7 solta e o bloco assenta // 8 cursor→preset · 9 clique · 10 re-tematiza + "Salvo" · 11 hold const DUR = [700, 750, 550, 700, 420, 1000, 450, 900, 850, 420, 1100, 1500]; const FIM = 10; const PRESSIONA_EM = { 2: 60, 4: 60, 9: 60 }; const DUR_PRESS = 150; // A CÂMERA. `k` é a escala, `a` é o alvo a enquadrar (o mesmo ref que o cursor // visita), `d` a duração da viagem. `a: null` = plano geral, k volta pra 1. // O ritmo copia o do vídeo do Corvex: entra, fecha, ABRE pra caber o arrasto // inteiro, fecha no clímax, e abre de vez quando o checkout troca de cara. const CAM = [ { k: 1.00, a: null, d: 900 }, // 0 plano geral { k: 1.30, a: 'categoria', d: 900 }, // 1 cursor indo pra categoria { k: 1.30, a: 'categoria', d: 900 }, // 2 a lista abre { k: 1.45, a: 'bloco', d: 800 }, // 3 desce até o bloco { k: 1.45, a: 'bloco', d: 800 }, // 4 pega { k: 1.12, a: 'zona', d: 900 }, // 5 abre: a viagem precisa das duas pontas { k: 1.35, a: 'zona', d: 700 }, // 6 fecha na zona de solta { k: 1.55, a: 'inserido', d: 800 }, // 7 clímax: o bloco assentando { k: 1.40, a: 'preset', d: 900 }, // 8 sobe até o preset { k: 1.40, a: 'preset', d: 900 }, // 9 clica { k: 1.00, a: null, d: 1200 }, // 10 ABRE — o re-tema tem que ser visto inteiro { k: 1.00, a: null, d: 1200 }, // 11 hold ]; function useReduced() { const [r, setR] = React.useState(false); React.useEffect(() => { if (!window.matchMedia) return; const mq = window.matchMedia('(prefers-reduced-motion: reduce)'); setR(mq.matches); const on = (e) => setR(e.matches); mq.addEventListener ? mq.addEventListener('change', on) : mq.addListener(on); return () => { mq.removeEventListener ? mq.removeEventListener('change', on) : mq.removeListener(on); }; }, []); return r; } function Cursor({ x, y, visivel, apertado, arrastando }) { return (
{arrastando && (
Barra de frete grátis arrastando…
)}
); } // "Etapa N" pequeno em cima, nome do passo embaixo — como no editor. function Etapa({ n, t, cor }) { return (
{n} Etapa {n} {t}
); } // Bloco "Contador de urgência" montado no checkout, acima da Etapa 1. // Estado próprio: só ele re-renderiza a cada segundo, não o editor inteiro. // Tingido em vez de sólido — a barra de anúncio logo acima já é um retângulo // escuro cheio, e duas barras sólidas empilhadas viram uma mancha só. function Contador({ T, parado }) { const [seg, setSeg] = React.useState(14 * 60 + 52); React.useEffect(() => { if (parado) return; const id = setInterval(() => setSeg((s) => (s <= 1 ? 14 * 60 + 52 : s - 1)), 1000); return () => clearInterval(id); }, [parado]); const dois = (v) => String(v).padStart(2, '0'); const partes = [[dois(Math.floor(seg / 3600)), 'h'], [dois(Math.floor(seg / 60) % 60), 'm'], [dois(seg % 60), 's']]; return (
Oferta termina em {partes.map(([v, u], i) => ( {i > 0 && :} {/* tabular-nums: o dígito muda, a largura não. Zero layout shift. */} {v} {u} ))}
); } // Bloco "Cupom desbloqueável" montado no resumo, abaixo do preço. // Empilhado porque a coluna tem 148px — é o que ela faz de verdade. function Cupom({ T }) { return (
Cupom desbloqueável
CUPOM10
Aplicar
10% liberado acima de R$ 300
); } function AddBloco({ ativo, children, inner }) { return (
{children || '+ Adicionar bloco'}
); } function EditorEmUso() { const reduzido = useReduced(); const [etapa, setEtapa] = React.useState(0); const [apertado, setApertado] = React.useState(false); const [visivel, setVisivel] = React.useState(false); const [cursor, setCursor] = React.useState({ x: 120, y: 240 }); const [cam, setCam] = React.useState({ tx: 0, ty: 0, k: 1 }); const [deslize, setDeslize] = React.useState(0); const [largo, setLargo] = React.useState(true); const secaoRef = React.useRef(null), palcoRef = React.useRef(null), alvos = React.useRef({}); const vpRef = React.useRef(null), conteudoRef = React.useRef(null), bibRef = React.useRef(null); // A câmera não roda abaixo de 1024px: ampliar uma maquete num viewport de // 390px deixa ilegível o pouco que sobrou — princípio 8. React.useEffect(() => { if (!window.matchMedia) return; const mq = window.matchMedia('(min-width: 1024px)'); setLargo(mq.matches); const on = (e) => setLargo(e.matches); mq.addEventListener ? mq.addEventListener('change', on) : mq.addListener(on); return () => { mq.removeEventListener ? mq.removeEventListener('change', on) : mq.removeListener(on); }; }, []); React.useEffect(() => { const el = secaoRef.current; if (!el) return; const io = new IntersectionObserver(([e]) => setVisivel(e.isIntersecting), { threshold: 0.3 }); io.observe(el); return () => io.disconnect(); }, []); React.useEffect(() => { if (reduzido) { setEtapa(FIM); return; } if (!visivel) return; const t = setTimeout(() => setEtapa((e) => (e + 1) % DUR.length), DUR[etapa]); return () => clearTimeout(t); }, [etapa, visivel, reduzido]); React.useEffect(() => { if (reduzido || !visivel) return; const atraso = PRESSIONA_EM[etapa]; if (atraso == null) { setApertado(false); return; } const a = setTimeout(() => setApertado(true), atraso); const b = setTimeout(() => setApertado(false), atraso + DUR_PRESS); return () => { clearTimeout(a); clearTimeout(b); }; }, [etapa, visivel, reduzido]); const alvoDaEtapa = { 1:'categoria', 2:'categoria', 3:'bloco', 4:'bloco', 5:'zona', 6:'zona', 7:'zona', 8:'preset', 9:'preset', 10:'preset' }; React.useLayoutEffect(() => { if (reduzido) { setCam({ tx: 0, ty: 0, k: 1 }); setDeslize(0); return; } const palco = palcoRef.current, vp = vpRef.current, cont = conteudoRef.current; const bib = bibRef.current; if (!palco || !vp || !cont) return; // Toda medição sai de offsetLeft/offsetTop, que IGNORAM transform e devolvem a // coordenada de layout. É isso que deixa mirar onde o alvo VAI estar, e não onde // ele está passando: nem a escala da câmera nem o deslize da biblioteca — as // duas coisas que estão animando ao mesmo tempo — contaminam a conta. const posAte = (el, parada) => { if (!el || !el.offsetWidth) return null; // display:none (mobile) → sem alvo let x = 0, y = 0, n = el; while (n && n !== parada) { x += n.offsetLeft; y += n.offsetTop; n = n.offsetParent; } return n === parada ? { x, y, w: el.offsetWidth, h: el.offsetHeight } : null; }; // Quanto a biblioteca rola. Só a partir do passo 2, quando a lista abre: antes // disso não há o que trazer pra cima. Teto de 280px = exatamente o que o acordeão // acrescenta, então rolar nunca revela espaço em branco no fim da coluna. const cat = posAte(alvos.current.categoria, palco); const d = etapa < 2 || !largo || !cat ? 0 : Math.min(Math.max(0, cat.y - 70), 280); setDeslize(d); // Alvo dentro da biblioteca? Então ele vai subir junto com o deslize. const corrige = (el, p) => (p && bib && bib.contains(el) ? { ...p, y: p.y - d } : p); const elCursor = alvos.current[alvoDaEtapa[etapa]]; const pc = corrige(elCursor, posAte(elCursor, palco)); if (pc) setCursor({ x: pc.x + Math.min(pc.w * 0.45, 120), y: pc.y + pc.h / 2 }); const c = CAM[etapa] || CAM[0]; const elFoco = largo && c.a ? alvos.current[c.a] : null; const pf = corrige(elFoco, posAte(elFoco, cont)); if (!pf || c.k <= 1) { setCam({ tx: 0, ty: 0, k: 1 }); return; } const W = vp.clientWidth, H = vp.clientHeight; const Cw = cont.offsetWidth, Ch = cont.offsetHeight; const k = c.k; // Enquadra o centro do alvo e prende nas bordas: a câmera nunca revela vazio. const tx = Math.min(0, Math.max(W - k * Cw, W / 2 - k * (pf.x + pf.w / 2))); const ty = Math.min(0, Math.max(H - k * Ch, H / 2 - k * (pf.y + pf.h / 2))); setCam({ tx, ty, k }); }, [etapa, reduzido, largo]); const listaAberta = etapa >= 2; const arrastando = etapa >= 5 && etapa <= 6; const zonaAtiva = etapa >= 5 && etapa <= 6; const inserido = etapa >= 7; const tematizado = etapa >= FIM; const reg = (k) => (el) => { if (el) alvos.current[k] = el; }; // Tema do preview: muda quando o preset "Noturno" é aplicado. // `urg*` é o contador de urgência: fundo tingido, dígitos em chip sólido. const T = tematizado ? { barra:'#1a1233', txt:'#ffffff', primaria:'#a78bfa', urgFundo:'rgba(167,139,250,.18)', urgTexto:'#6d28d9', urgChip:'#6d28d9', urgChipTxt:'#ffffff' } : { barra:'#111111', txt:'#ffffff', primaria:'#111111', urgFundo:'rgba(17,17,17,.06)', urgTexto:'rgba(17,17,17,.72)', urgChip:'#111111', urgChipTxt:'#ffffff' }; const Topo = ({ children, className = '' }) => ( {children} ); return (
Editor visual · arraste e solte

Seu checkout,
do seu jeito.

34 blocos avançados além dos essenciais. Você arrasta, solta, aplica um preset de marca e o checkout muda na hora. Nenhum dev no caminho.

{/* Janela do editor — clara, como o app de verdade */}

Interface reproduzida de app.cartroi.com/editor/checkout.

); } setTimeout(() => window.__attachReveal && window.__attachReveal(), 50); Object.assign(window, { EditorEmUso }); })();