// ====== PROMO POP-UP — Cupom AGENDA90 ====== // Configure SHEETS_ENDPOINT abaixo com a URL do seu Google Apps Script Web App // para receber os leads numa planilha. Se vazio, o form continua funcionando // (envia direto para WhatsApp) mas não grava na planilha. // // Como criar o endpoint: // 1. Vá em sheets.google.com → crie nova planilha // 2. Em Extensões → Apps Script, cole o código abaixo (substitua o ID da planilha): // // function doPost(e) { // const sheet = SpreadsheetApp.openById('SEU_ID_DA_PLANILHA').getActiveSheet(); // const data = JSON.parse(e.postData.contents); // sheet.appendRow([new Date(), data.nome, data.telefone, data.area, data.coupon, data.origin]); // return ContentService.createTextOutput(JSON.stringify({ok:true})).setMimeType(ContentService.MimeType.JSON); // } // // 3. Implantar → Nova implantação → Web app → Acesso: Qualquer pessoa // 4. Copie a URL e cole abaixo // 5. Na primeira linha da planilha, ponha cabeçalhos: Data | Nome | Telefone | Área | Cupom | Origem const SHEETS_ENDPOINT = 'https://script.google.com/macros/s/AKfycbxuCVA_1WzM7jz-7nDOLZJIvbTW6PGVmq7BTbZaWfp7V7W8r4iJVkfro4jWdJQFbyRzMg/exec'; const PROMO_DELAY_MS = 120000; // 2 min const PROMO_TIMER_S = 15 * 60; // 15 min countdown const COUPON = 'AGENDA90'; const AREAS = [ 'Buço', 'Axilas', 'Virilha', 'Pernas inteiras', 'Meia perna', 'Barba (masculino)', 'Costas (masculino)', 'Tórax (masculino)', 'Combo Mulher (axila + virilha + meia perna)', 'Combo Homem (barba + axila + nuca)', 'Outra área / não sei ainda']; function PromoPopup() { const [open, setOpen] = React.useState(false); const [stage, setStage] = React.useState('offer'); // offer | success const [secondsLeft, setSecondsLeft] = React.useState(PROMO_TIMER_S); const [form, setForm] = React.useState({ nome: '', telefone: '', area: '' }); const [errors, setErrors] = React.useState({}); // Mostra após delay, se elegível React.useEffect(() => { try { if (localStorage.getItem('nubelle_promo_declined')) return; if (localStorage.getItem('nubelle_promo_claimed')) return; } catch (e) {} const id = setTimeout(() => setOpen(true), PROMO_DELAY_MS); return () => clearTimeout(id); }, []); // Trava scroll do body React.useEffect(() => { if (!open) return; const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => {document.body.style.overflow = prev;}; }, [open]); // Cronômetro React.useEffect(() => { if (!open || stage !== 'offer') return; const id = setInterval(() => { setSecondsLeft((s) => { if (s <= 1) { clearInterval(id); setOpen(false); // expira sem marcar return 0; } return s - 1; }); }, 1000); return () => clearInterval(id); }, [open, stage]); // ESC fecha (sem marcar) React.useEffect(() => { if (!open) return; const onKey = (e) => {if (e.key === 'Escape') setOpen(false);}; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open]); function fmtTime(s) { const m = Math.floor(s / 60); const ss = s % 60; return `${String(m).padStart(2, '0')}:${String(ss).padStart(2, '0')}`; } function fmtPhone(v) { const d = v.replace(/\D/g, '').slice(0, 11); if (d.length <= 2) return d; if (d.length <= 6) return `(${d.slice(0, 2)}) ${d.slice(2)}`; if (d.length <= 10) return `(${d.slice(0, 2)}) ${d.slice(2, 6)}-${d.slice(6)}`; return `(${d.slice(0, 2)}) ${d.slice(2, 7)}-${d.slice(7)}`; } function handleDecline() { try {localStorage.setItem('nubelle_promo_declined', String(Date.now()));} catch (e) {} setOpen(false); } function handleClose() { // X — fecha sem marcar nada; pode reaparecer em outra visita após 120s setOpen(false); } function validate() { const e = {}; if (form.nome.trim().split(/\s+/).length < 2) e.nome = 'Informe nome e sobrenome'; const dig = form.telefone.replace(/\D/g, ''); if (dig.length < 10) e.telefone = 'Telefone incompleto'; if (!form.area) e.area = 'Selecione uma área'; setErrors(e); return Object.keys(e).length === 0; } function handleSubmit(ev) { ev.preventDefault(); if (!validate()) return; const payload = { ...form, coupon: COUPON, at: new Date().toISOString(), origin: 'site-popup' }; try { localStorage.setItem('nubelle_promo_claimed', JSON.stringify(payload)); } catch (e) {} // Envia para Google Sheets em background (não bloqueia UX) if (SHEETS_ENDPOINT) { try { fetch(SHEETS_ENDPOINT, { method: 'POST', mode: 'no-cors', headers: { 'Content-Type': 'text/plain;charset=utf-8' }, body: JSON.stringify(payload) }).catch(() => {}); } catch (e) {} } setStage('success'); } function whatsappLink() { const msg = `Olá! Acabei de ativar minha oferta no site da Nubelle 💚\n\n` + `*Cupom:* ${COUPON} (até R$ 90 OFF, limite 10% do valor)\n` + `*Bônus:* sessão experimental na axila ou buço (mediante disponibilidade)\n\n` + `*Nome:* ${form.nome}\n` + `*Telefone:* ${form.telefone}\n` + `*Área de interesse:* ${form.area}\n\n` + `Quero agendar imediatamente. Qual a melhor data disponível?`; return `https://wa.me/5571992628880?text=${encodeURIComponent(msg)}`; } if (!open) return null; return (
{/* Backdrop */}
{/* Card */}
{/* glow halo */}
{/* Close X */} {stage === 'offer' &&
{/* Header / pill */}
oferta especial · só hoje
{/* Headline */}

Um presente
de boas-vindas.

Para quem agendar imediatamente:

{/* Benefits list */}
−
Até R$ 90 OFF
em qualquer protocolo · uso máximo de 10% do valor total
★
Sessão experimental grátis
na axila ou buço · mediante disponibilidade
{/* Coupon + Timer */}
seu cupom
{COUPON}
expira em
{fmtTime(secondsLeft)}
{/* Form */}
setForm({ ...form, nome: e.target.value })} className="w-full px-4 py-3 rounded-xl text-sm transition focus:outline-none" style={{ background: 'rgba(244,237,227,0.06)', border: errors.nome ? '1px solid #ff6b6b' : '1px solid rgba(244,237,227,0.12)', color: '#F4EDE3' }} /> {errors.nome &&
{errors.nome}
}
setForm({ ...form, telefone: fmtPhone(e.target.value) })} className="w-full px-4 py-3 rounded-xl text-sm transition focus:outline-none tabular-nums" style={{ background: 'rgba(244,237,227,0.06)', border: errors.telefone ? '1px solid #ff6b6b' : '1px solid rgba(244,237,227,0.12)', color: '#F4EDE3' }} /> {errors.telefone &&
{errors.telefone}
}
{errors.area &&
{errors.area}
}
{/* Decline */}
Ao enviar você concorda em receber contato no WhatsApp informado.
Cupom não-cumulativo · válido para agendamento imediato.
} {stage === 'success' &&
{/* check icon */}
● tudo pronto

Sua oferta está
ativada, {form.nome.split(' ')[0]}.

Agora é só falar com nossos especialistas pelo WhatsApp e solicitar a melhor data para sua agenda.

{/* Coupon highlight */}
informe o cupom no atendimento
{COUPON}
Solicitar minha data agora
}
); } Object.assign(window, { PromoPopup });