// apice-form.jsx — Multi-step lead form modal // ===================================================================== // 🔗 INTEGRAÇÃO COM GOOGLE SHEETS // --------------------------------------------------------------------- // 1. Crie uma Planilha Google nova (https://sheets.new). // 2. Menu Extensões → Apps Script. Apague o conteúdo e cole o script // que está em /SHEETS_INTEGRATION.md (gerado neste projeto). // 3. Clique em "Implantar" → "Nova implantação" → tipo "App da Web". // - Executar como: Eu mesmo // - Quem tem acesso: Qualquer pessoa // 4. Copie a URL gerada (termina com /exec) e cole abaixo: const SHEET_WEBHOOK_URL = 'https://script.google.com/macros/s/AKfycbz3AcvKUTu9tvUN1kJCZq9XclvzRrvBVd0WppnubOHHAaW6d27iShmiXa7cNDRFV6Z7kA/exec'; // ===================================================================== const COUNTRIES = [ {c:'BR',n:'Brasil',d:'+55',f:'🇧🇷'}, {c:'US',n:'Estados Unidos',d:'+1',f:'🇺🇸'}, {c:'PT',n:'Portugal',d:'+351',f:'🇵🇹'}, {c:'ES',n:'Espanha',d:'+34',f:'🇪🇸'}, {c:'AR',n:'Argentina',d:'+54',f:'🇦🇷'}, {c:'MX',n:'México',d:'+52',f:'🇲🇽'}, {c:'CO',n:'Colômbia',d:'+57',f:'🇨🇴'}, {c:'CL',n:'Chile',d:'+56',f:'🇨🇱'}, {c:'PE',n:'Peru',d:'+51',f:'🇵🇪'}, {c:'UY',n:'Uruguai',d:'+598',f:'🇺🇾'}, {c:'PY',n:'Paraguai',d:'+595',f:'🇵🇾'}, {c:'BO',n:'Bolívia',d:'+591',f:'🇧🇴'}, {c:'EC',n:'Equador',d:'+593',f:'🇪🇨'}, {c:'VE',n:'Venezuela',d:'+58',f:'🇻🇪'}, {c:'CA',n:'Canadá',d:'+1',f:'🇨🇦'}, {c:'GB',n:'Reino Unido',d:'+44',f:'🇬🇧'}, {c:'FR',n:'França',d:'+33',f:'🇫🇷'}, {c:'DE',n:'Alemanha',d:'+49',f:'🇩🇪'}, {c:'IT',n:'Itália',d:'+39',f:'🇮🇹'}, {c:'NL',n:'Holanda',d:'+31',f:'🇳🇱'}, {c:'BE',n:'Bélgica',d:'+32',f:'🇧🇪'}, {c:'CH',n:'Suíça',d:'+41',f:'🇨🇭'}, {c:'AT',n:'Áustria',d:'+43',f:'🇦🇹'}, {c:'IE',n:'Irlanda',d:'+353',f:'🇮🇪'}, {c:'SE',n:'Suécia',d:'+46',f:'🇸🇪'}, {c:'NO',n:'Noruega',d:'+47',f:'🇳🇴'}, {c:'DK',n:'Dinamarca',d:'+45',f:'🇩🇰'}, {c:'FI',n:'Finlândia',d:'+358',f:'🇫🇮'}, {c:'PL',n:'Polônia',d:'+48',f:'🇵🇱'}, {c:'CZ',n:'Tchéquia',d:'+420',f:'🇨🇿'}, {c:'GR',n:'Grécia',d:'+30',f:'🇬🇷'}, {c:'TR',n:'Turquia',d:'+90',f:'🇹🇷'}, {c:'RU',n:'Rússia',d:'+7',f:'🇷🇺'}, {c:'UA',n:'Ucrânia',d:'+380',f:'🇺🇦'}, {c:'JP',n:'Japão',d:'+81',f:'🇯🇵'}, {c:'CN',n:'China',d:'+86',f:'🇨🇳'}, {c:'KR',n:'Coreia do Sul',d:'+82',f:'🇰🇷'}, {c:'IN',n:'Índia',d:'+91',f:'🇮🇳'}, {c:'AU',n:'Austrália',d:'+61',f:'🇦🇺'}, {c:'NZ',n:'Nova Zelândia',d:'+64',f:'🇳🇿'}, {c:'ZA',n:'África do Sul',d:'+27',f:'🇿🇦'}, {c:'AE',n:'Emirados Árabes',d:'+971',f:'🇦🇪'}, {c:'SA',n:'Arábia Saudita',d:'+966',f:'🇸🇦'}, {c:'IL',n:'Israel',d:'+972',f:'🇮🇱'}, {c:'EG',n:'Egito',d:'+20',f:'🇪🇬'}, {c:'MA',n:'Marrocos',d:'+212',f:'🇲🇦'}, {c:'NG',n:'Nigéria',d:'+234',f:'🇳🇬'}, {c:'KE',n:'Quênia',d:'+254',f:'🇰🇪'}, {c:'AO',n:'Angola',d:'+244',f:'🇦🇴'}, {c:'MZ',n:'Moçambique',d:'+258',f:'🇲🇿'}, {c:'CV',n:'Cabo Verde',d:'+238',f:'🇨🇻'}, {c:'SG',n:'Singapura',d:'+65',f:'🇸🇬'}, {c:'MY',n:'Malásia',d:'+60',f:'🇲🇾'}, {c:'TH',n:'Tailândia',d:'+66',f:'🇹🇭'}, {c:'PH',n:'Filipinas',d:'+63',f:'🇵🇭'}, {c:'ID',n:'Indonésia',d:'+62',f:'🇮🇩'}, {c:'VN',n:'Vietnã',d:'+84',f:'🇻🇳'}, ]; const EMAIL_RX = /^[a-zA-Z0-9._%+-]+@(gmail|hotmail|outlook|yahoo|icloud|live|me|msn|aol|protonmail|proton|zoho|fastmail|gmx|mail|uol|bol|terra|ig|globo|r7|edu|usp|unb|ufmg|ufrj|unicamp|gov|com|net|org|co|io|app|dev|tech|me|pt|br|us|uk|fr|de|es|it)\.[a-zA-Z]{2,}$/; const SIMPLE_EMAIL_RX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; const STEP_LABELS = () => [tx('Identificação','Identification'), tx('Contexto','Context'), tx('Consultoria','Coaching')]; const COMMITMENT_OPTIONS = () => [ { v:'Sim, quero entrar para a Ápice', l: tx('Sim, quero entrar para a Ápice','Yes, I want to join Ápice'), d: tx('Estou pronto para investir tempo e energia agora','I am ready to invest time and energy now') }, { v:'Tenho interesse, mas preciso entender mais sobre a Ápice', l: tx('Tenho interesse, mas preciso entender mais','I am interested, but I need to understand more'), d: tx('Quero conversar antes de decidir','I want to chat before deciding') }, { v:'Ainda estou avaliando se esse é o momento certo', l: tx('Ainda estou avaliando o momento','Still evaluating the right moment'), d: tx('Posso ouvir mais e decidir depois','I can hear more and decide later') }, ]; const FORM_MODALITIES = () => [ { id: 'online', icon: '💻', title: tx('Consultoria Online','Online Consulting'), sub: tx('Acompanhamento 100% remoto','100% remote coaching'), plans: [ { tier: 'Premium', accent: false, items: [ tx('Treino personalizado com treinadores','Personalized training with coaches'), tx('Avaliação online (medidas + funcional)','Online assessment (measurements + functional)'), tx('Acesso ao grupo exclusivo de alunos','Access to the exclusive student group'), tx('Suporte integrado ao time','Integrated team support'), ], }, { tier: 'Elite', accent: true, items: [ tx('Treino personalizado com treinadores','Personalized training with coaches'), tx('Avaliação física online (medidas + funcional)','Online physical assessment (measurements + functional)'), tx('Dashboard de progressão física','Physical progress dashboard'), tx('Acompanhamento nutricional','Nutritional coaching'), tx('Acesso ao grupo exclusivo de alunos','Access to the exclusive student group'), tx('Suporte integrado ao time','Integrated team support'), ], }, ], }, { id: 'semipresencial', icon: '🤝', title: tx('Semipresencial','Hybrid'), sub: tx('Online + avaliação no estúdio','Online + in-studio assessment'), plans: [ { tier: 'Premium', accent: false, items: [ tx('Treino personalizado com treinadores','Personalized training with coaches'), tx('Avaliação presencial (medidas + funcional)','In-person assessment (measurements + functional)'), tx('Acesso ao grupo exclusivo de alunos','Access to the exclusive student group'), tx('Suporte integrado ao time','Integrated team support'), ], }, { tier: 'Elite', accent: true, items: [ tx('Treino personalizado com treinadores','Personalized training with coaches'), tx('Avaliação física presencial (medidas + funcional)','In-person physical assessment (measurements + functional)'), tx('Dashboard de progressão física','Physical progress dashboard'), tx('Acompanhamento nutricional','Nutritional coaching'), tx('Acesso ao grupo exclusivo de alunos','Access to the exclusive student group'), ], }, ], }, { id: 'presencial', icon: '🏋️', title: tx('Presencial','In-Person'), sub: tx('Personal training na agenda','Personal training on schedule'), plans: [ { tier: 'Premium', accent: false, items: [ tx('1× a 2× aulas presenciais por semana','1× to 2× in-person sessions per week'), tx('Plataforma de treino online','Online training platform'), tx('Periodização contínua','Continuous periodization'), tx('Acesso ao grupo exclusivo de alunos','Access to the exclusive student group'), tx('Suporte integrado ao time','Integrated team support'), ], }, { tier: 'Elite', accent: true, items: [ tx('2× a 5× aulas presenciais por semana','2× to 5× in-person sessions per week'), tx('Plataforma de treino online','Online training platform'), tx('Periodização contínua','Continuous periodization'), tx('Avaliação física a cada 1 mês (composição corporal, força, VO₂)','Physical assessment every month (body composition, strength, VO₂)'), tx('Massoterapia esportiva inclusa','Sports massage included'), tx('Acompanhamento nutricional','Nutritional coaching'), tx('Ajustes de periodização baseados em dados reais','Periodization adjustments based on real data'), tx('Suporte integrado ao time','Integrated team support'), ], }, ], }, ]; const Timeline = ({ step, total }) => (
{Array.from({length:total}).map((_,i)=>{ const n = i+1; const done = n < step; const active = n === step; return (
{done ? '✓' : n}
{STEP_LABELS()[i]}
{n < total && (
)} ); })}
); const Field = ({ label, error, children }) => (
{children} {error &&

! {error}

}
); const inputStyle = (err) => ({ width:'100%', padding:'14px 16px', background:'var(--lm-black)', border: `1px solid ${err?'var(--lm-alert)':'var(--lm-graphite)'}`, borderRadius:10, color:'var(--lm-pearl)', fontSize:15, fontFamily:'inherit', outline:'none', transition:'border-color 180ms ease', }); const PhoneField = ({ country, setCountry, phone, setPhone, error }) => { const [open, setOpen] = React.useState(false); const [search, setSearch] = React.useState(''); const filtered = COUNTRIES.filter(c => c.n.toLowerCase().includes(search.toLowerCase()) || c.d.includes(search) || c.c.toLowerCase().includes(search.toLowerCase()) ); return (
setPhone(e.target.value.replace(/[^\d\s()-]/g,''))} placeholder={tx('(11) 91234-5678','(555) 123-4567')} style={inputStyle(error)} /> {open && (
setSearch(e.target.value)} autoFocus placeholder={tx('Buscar país, DDI ou código...','Search country, code or dial code...')} style={{ width:'100%', padding:'10px 12px', background:'var(--lm-black)', border:'1px solid var(--lm-graphite)', borderRadius:8, color:'var(--lm-pearl)', fontSize:13, fontFamily:'inherit', outline:'none' }} />
{filtered.map(c=>( ))} {filtered.length===0 &&
{tx('Nenhum país encontrado','No country found')}
}
)}
); }; const MONTHS_PT = () => getLang() === 'en' ? ['January','February','March','April','May','June','July','August','September','October','November','December'] : ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro']; const WEEKDAYS_PT = () => getLang() === 'en' ? ['S','M','T','W','T','F','S'] : ['D','S','T','Q','Q','S','S']; const DatePicker = ({ value, onChange, error }) => { const [open, setOpen] = React.useState(false); const [view, setView] = React.useState(() => { if (value) { const d = new Date(value+'T00:00:00'); return { y: d.getFullYear(), m: d.getMonth() }; } return { y: 1995, m: 0 }; }); const [mode, setMode] = React.useState('day'); // day | month | year const ref = React.useRef(null); const today = new Date(); today.setHours(0,0,0,0); const sel = value ? new Date(value+'T00:00:00') : null; React.useEffect(()=>{ const h = (e)=>{ if(ref.current && !ref.current.contains(e.target)) setOpen(false); }; if(open) document.addEventListener('mousedown',h); return ()=>document.removeEventListener('mousedown',h); },[open]); const display = value ? value.split('-').reverse().join('/') : ''; const firstDay = new Date(view.y, view.m, 1).getDay(); const daysInMonth = new Date(view.y, view.m+1, 0).getDate(); const daysPrev = new Date(view.y, view.m, 0).getDate(); const cells = []; for (let i=firstDay-1; i>=0; i--) cells.push({d:daysPrev-i, cur:false, m:view.m-1}); for (let i=1; i<=daysInMonth; i++) cells.push({d:i, cur:true, m:view.m}); while (cells.length<42) cells.push({d:cells.length-firstDay-daysInMonth+1, cur:false, m:view.m+1}); const navMonth = (delta) => { let m = view.m+delta, y = view.y; if (m<0) { m=11; y--; } else if (m>11) { m=0; y++; } if (y < 1925 || y > today.getFullYear()) return; setView({y,m}); }; const navYearChunk = (delta) => { const newY = view.y + delta; if (newY < 1925 - 11 || newY > today.getFullYear()) return; setView(v=>({...v, y:newY})); }; const pick = (cell) => { let m = cell.m, y = view.y; if (m<0) { m=11; y--; } else if (m>11) { m=0; y++; } const dt = new Date(y, m, cell.d); if (dt > today) return; const iso = `${y}-${String(m+1).padStart(2,'0')}-${String(cell.d).padStart(2,'0')}`; onChange(iso); setOpen(false); }; const yearStart = Math.floor(view.y/12)*12; return (
{open && (
{mode==='day' && <>
{WEEKDAYS_PT().map((d,i)=>
{d}
)}
{cells.map((cell,i)=>{ const cellDate = new Date(view.y, cell.m, cell.d); const isFuture = cellDate > today; const isToday = cellDate.getTime() === today.getTime(); const isSel = sel && cellDate.getTime() === sel.getTime(); return ( ); })}
} {mode==='month' && (
{MONTHS_PT().map((mn,i)=>( ))}
)} {mode==='year' && (
{Array.from({length:12}).map((_,i)=>{ const yr = yearStart+i; const isFut = yr > today.getFullYear() || yr < 1925; return ( ); })}
)}
)}
); }; const RadioGrid = ({ value, setValue, options, cols=2 }) => (
{options.map(o=>( ))}
); const TRAINING_BUCKETS = () => [ {v:'Nunca treinou', l: tx('Nunca treinou','Never trained'), d: tx('Vou começar agora','Starting now')}, {v:'0–6 meses', l:'0–6 ' + tx('meses','months'), d: tx('Iniciante','Beginner')}, {v:'6–12 meses', l:'6–12 ' + tx('meses','months'), d: tx('Em adaptação','Adapting')}, {v:'1–2 anos', l:'1–2 ' + tx('anos','years'), d: tx('Intermediário','Intermediate')}, {v:'2 anos ou mais',l:'2 ' + tx('anos+','years+'), d: tx('Experiente','Experienced')}, ]; const TrainingBuckets = ({ value, setValue, error }) => (
{TRAINING_BUCKETS().map(b=>( ))}
); const ApiceForm = () => { useLang(); // re-render when language toggles const [open, setOpen] = React.useState(false); const [step, setStep] = React.useState(1); const [submitted, setSubmitted] = React.useState(false); const [data, setData] = React.useState({ name:'', email:'', phone:'', birthdate:'', modality:'', tier:'', plan:'', commitment:'', training:'', goal:'', history:'', expectation:'', }); const [country, setCountry] = React.useState(COUNTRIES[0]); const [errors, setErrors] = React.useState({}); React.useEffect(()=>{ const handler = ()=>{ setOpen(true); setStep(1); setSubmitted(false); setErrors({}); }; window.addEventListener('apice:openForm', handler); return ()=>window.removeEventListener('apice:openForm', handler); },[]); React.useEffect(()=>{ document.body.style.overflow = open ? 'hidden' : ''; return ()=>{ document.body.style.overflow = ''; }; },[open]); // In EN, only Online Consulting is offered — auto-select it so the user // jumps straight to the Premium/Elite tier picker. React.useEffect(()=>{ if (open && getLang() === 'en' && data.modality !== 'online') { setData(d => ({ ...d, modality: 'online' })); } }, [open, getLang()]); const set = (k,v)=>setData(d=>({...d,[k]:v})); const validateStep1 = () => { const e = {}; if (!data.name.trim() || data.name.trim().length<2) e.name = tx('Digite seu nome completo','Enter your full name'); if (!data.email.trim()) e.email = tx('Digite seu e-mail','Enter your email'); else if (!SIMPLE_EMAIL_RX.test(data.email)) e.email = tx('E-mail inválido. Use um formato como nome@gmail.com','Invalid email. Use a format like name@gmail.com'); else if (!EMAIL_RX.test(data.email)) e.email = tx('Use um e-mail válido (Gmail, Hotmail, Outlook, etc.)','Use a valid email (Gmail, Hotmail, Outlook, etc.)'); if (!data.phone.trim() || data.phone.replace(/\D/g,'').length < 6) e.phone = tx('Digite um número válido','Enter a valid phone number'); if (!data.birthdate) e.birthdate = tx('Selecione sua data de nascimento','Select your date of birth'); else { const b = new Date(data.birthdate); const now = new Date(); let age = now.getFullYear() - b.getFullYear(); const m = now.getMonth() - b.getMonth(); if (m < 0 || (m === 0 && now.getDate() < b.getDate())) age--; if (isNaN(age) || age<14 || age>100) e.birthdate = tx('Data inválida (idade entre 14 e 100)','Invalid date (age between 14 and 100)'); } setErrors(e); return Object.keys(e).length===0; }; const validateStep2 = () => { const e = {}; if (!data.training) e.training = tx('Selecione há quanto tempo você treina','Select how long you have been training'); if (!data.goal) e.goal = tx('Selecione um objetivo','Select a goal'); if (!data.history.trim() || data.history.trim().length<5) e.history = tx('Conte um pouco do seu histórico','Tell us a bit about your background'); if (!data.expectation.trim() || data.expectation.trim().length<5) e.expectation = tx('Conte sua expectativa','Tell us your expectation'); setErrors(e); return Object.keys(e).length===0; }; const validateStep3 = () => { const e = {}; if (!data.modality) e.modality = tx('Escolha uma modalidade (online, semipresencial ou presencial)','Choose a format (online, hybrid or in-person)'); if (!data.tier) e.tier = tx('Escolha um nível (Premium ou Elite)','Choose a tier (Premium or Elite)'); if (!data.commitment) e.commitment = tx('Selecione uma opção sobre seu compromisso','Select an option about your commitment'); setErrors(e); return Object.keys(e).length===0; }; const next = () => { const ok = step===1?validateStep1():step===2?validateStep2():validateStep3(); if (!ok) return; if (step<3) { setStep(step+1); setErrors({}); } else submit(); }; const submit = () => { const fullPhone = `${country.d} ${data.phone}`; // Formata data de nascimento como DD/MM/AAAA para a planilha const birthBR = data.birthdate ? data.birthdate.split('-').reverse().join('/') : ''; // Combina modalidade + nível para a coluna "consultoria" // (sempre em PT para manter a planilha consistente) const MOD_PT_TITLES = { online: 'Consultoria Online', semipresencial: 'Semipresencial', presencial: 'Presencial' }; const consultoria = data.modality && data.tier ? `${MOD_PT_TITLES[data.modality] || data.modality} — ${data.tier}` : ''; // Payload na MESMA ORDEM das colunas da planilha "Página1": // A:nome | B:email | C:nùmero | D:data de nascimento | // E:ha quanto tempo treina | F:objetivo principal | G:historico | // H:o que voce esperar mudar nos proximos 6 meses | // I:consultoria | J:Você está disposto a investir seu tempo... const payload = { nome: data.name, email: data.email, numero: fullPhone, data_nascimento: birthBR, tempo_treino: data.training, objetivo: data.goal, historico: data.history, expectativa: data.expectation, consultoria: consultoria, compromisso: data.commitment, }; // 1) Envia para a Planilha Google (Apps Script) if (SHEET_WEBHOOK_URL && SHEET_WEBHOOK_URL.startsWith('http')) { try { fetch(SHEET_WEBHOOK_URL, { method: 'POST', mode: 'no-cors', // Apps Script aceita; não precisamos ler a resposta headers: { 'Content-Type': 'text/plain;charset=utf-8' }, body: JSON.stringify(payload), }).catch(err => console.warn('[Ápice] Falha ao enviar para planilha:', err)); } catch (err) { console.warn('[Ápice] Erro ao iniciar envio para planilha:', err); } } else { console.warn('[Ápice] SHEET_WEBHOOK_URL não configurada. Os dados NÃO foram salvos na planilha.'); } // 2) Mostra tela de confirmação (sem redirecionamento) setSubmitted(true); }; if (!open) return null; return (
{if(e.target===e.currentTarget)setOpen(false);}} style={{ position:'fixed', inset:0, zIndex:1000, background:'rgba(0,0,0,0.82)', backdropFilter:'blur(8px)', display:'flex', alignItems:'center', justifyContent:'center', padding:'24px 16px', overflowY:'auto', fontFamily:"'Inter',sans-serif", animation:'fadeIn 220ms ease' }}>
{submitted ? (
✓

{tx('Aplicação enviada!','Application submitted!')}

{tx('Um personal da equipe da Ápice entrará em contato com você para finalizar o atendimento com o nosso time.','A trainer from the Ápice team will reach out to you to complete your onboarding with our team.')}

) : ( <>

{tx('Aplicação · Ápice','Application · Ápice')}

{step===1 && tx("Vamos começar pelo básico","Let's start with the basics")} {step===2 && tx('Conte um pouco sobre você','Tell us a bit about yourself')} {step===3 && tx('Escolha sua modalidade','Choose your format')}

{tx(`Etapa ${step} de 3 · Leva menos de 2 min`,`Step ${step} of 3 · Takes less than 2 min`)}

{step===1 && <> set('name',e.target.value)} placeholder={tx('Como você quer ser chamado(a)','How do you want to be called')} style={inputStyle(errors.name)} /> set('email',e.target.value)} placeholder="your@email.com" style={inputStyle(errors.email)} /> set('phone',v)} error={errors.phone} /> set('birthdate',v)} error={errors.birthdate} /> } {step===2 && <> set('training',v)} error={errors.training} /> set('goal',v)} cols={2} options={[ {v:'Hipertrofia / Estética', l: tx('Hipertrofia · estética','Hypertrophy · aesthetics')}, {v:'Emagrecimento / Composição corporal', l: tx('Emagrecimento','Fat loss')}, {v:'Performance esportiva', l: tx('Performance','Performance')}, {v:'Saúde / Recuperação / Dor', l: tx('Saúde · recuperação','Health · recovery')}, ]} />