|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
|
|
<title>Assistente de Bolso - Onboarding WhatsApp Flow</title> |
|
|
<script src="https://unpkg.com/react@18/umd/react.development.js"></script> |
|
|
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> |
|
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
* { margin: 0; padding: 0; box-sizing: border-box; } |
|
|
body { background: linear-gradient(135deg, #075E54 0%, #128C7E 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } |
|
|
#root { width: 100%; display: flex; justify-content: center; } |
|
|
::-webkit-scrollbar { width: 3px; } |
|
|
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; } |
|
|
input::placeholder, textarea::placeholder { color: #8696A0; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div id="root"></div> |
|
|
<script type="text/babel"> |
|
|
const { useState } = React; |
|
|
const COLORS = { teal: '#075E54', tealDark: '#054D44', lightGreen: '#25D366', whatsappGreen: '#00A884', chatBg: '#ECE5DD', white: '#FFFFFF', textPrimary: '#111B21', textSecondary: '#667781', inputBorder: '#D1D7DB', inputBg: '#FFFFFF', error: '#EA0038', headerBg: '#008069', bubbleOut: '#D9FDD3', bubbleIn: '#FFFFFF' }; |
|
|
|
|
|
const FlowHeader = ({ title, onBack, showBack = true }) => ( |
|
|
<div style={{ background: COLORS.headerBg, padding: '12px 16px', display: 'flex', alignItems: 'center', gap: '16px', minHeight: '56px' }}> |
|
|
{showBack && <button onClick={onBack} style={{ background: 'transparent', border: 'none', padding: '8px', margin: '-8px', cursor: 'pointer', display: 'flex', alignItems: 'center' }}><svg width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></button>} |
|
|
<span style={{ color: '#fff', fontSize: '18px', fontWeight: '500' }}>{title}</span> |
|
|
</div> |
|
|
); |
|
|
|
|
|
const TextSubheading = ({ children }) => ( |
|
|
<h2 style={{ color: COLORS.textPrimary, fontSize: '18px', fontWeight: '600', marginBottom: '8px', lineHeight: '1.3' }}>{children}</h2> |
|
|
); |
|
|
|
|
|
const BodyText = ({ children, style = {} }) => ( |
|
|
<p style={{ color: COLORS.textSecondary, fontSize: '14px', lineHeight: '1.5', marginBottom: '20px', ...style }}>{children}</p> |
|
|
); |
|
|
|
|
|
const TextInput = ({ label, value, onChange, placeholder, error, hint, type = 'text', required = true }) => ( |
|
|
<div style={{ marginBottom: '20px' }}> |
|
|
<label style={{ color: COLORS.textPrimary, fontSize: '14px', fontWeight: '500', display: 'block', marginBottom: '8px' }}>{label} {required && <span style={{ color: COLORS.error }}>*</span>}</label> |
|
|
<input type={type} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} style={{ width: '100%', padding: '14px 16px', background: COLORS.inputBg, border: `1px solid ${error ? COLORS.error : COLORS.inputBorder}`, borderRadius: '8px', color: COLORS.textPrimary, fontSize: '16px', outline: 'none' }} /> |
|
|
{error && <p style={{ color: COLORS.error, fontSize: '12px', marginTop: '4px' }}>{error}</p>} |
|
|
{hint && !error && <p style={{ color: COLORS.textSecondary, fontSize: '12px', marginTop: '4px' }}>{hint}</p>} |
|
|
</div> |
|
|
); |
|
|
|
|
|
const TextArea = ({ label, value, onChange, placeholder, error, rows = 3, required = true }) => ( |
|
|
<div style={{ marginBottom: '20px' }}> |
|
|
<label style={{ color: COLORS.textPrimary, fontSize: '14px', fontWeight: '500', display: 'block', marginBottom: '8px' }}>{label} {required && <span style={{ color: COLORS.error }}>*</span>}</label> |
|
|
<textarea value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} rows={rows} style={{ width: '100%', padding: '14px 16px', background: COLORS.inputBg, border: `1px solid ${error ? COLORS.error : COLORS.inputBorder}`, borderRadius: '8px', color: COLORS.textPrimary, fontSize: '16px', outline: 'none', resize: 'none', fontFamily: 'inherit' }} /> |
|
|
{error && <p style={{ color: COLORS.error, fontSize: '12px', marginTop: '4px' }}>{error}</p>} |
|
|
</div> |
|
|
); |
|
|
|
|
|
const RadioButtonsGroup = ({ label, options, selected, onChange, error }) => ( |
|
|
<div style={{ marginBottom: '20px' }}> |
|
|
<label style={{ color: COLORS.textPrimary, fontSize: '14px', fontWeight: '500', display: 'block', marginBottom: '12px' }}>{label} <span style={{ color: COLORS.error }}>*</span></label> |
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}> |
|
|
{options.map((opt) => ( |
|
|
<button key={opt.value} type="button" onClick={() => onChange(opt.value)} style={{ padding: '14px 16px', background: COLORS.white, border: `1.5px solid ${selected === opt.value ? COLORS.whatsappGreen : COLORS.inputBorder}`, borderRadius: '8px', color: COLORS.textPrimary, fontSize: '15px', textAlign: 'left', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '12px' }}> |
|
|
<div style={{ width: '20px', height: '20px', borderRadius: '50%', border: `2px solid ${selected === opt.value ? COLORS.whatsappGreen : COLORS.inputBorder}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{selected === opt.value && <div style={{ width: '10px', height: '10px', borderRadius: '50%', background: COLORS.whatsappGreen }} />}</div> |
|
|
{opt.label} |
|
|
</button> |
|
|
))} |
|
|
</div> |
|
|
{error && <p style={{ color: COLORS.error, fontSize: '12px', marginTop: '4px' }}>{error}</p>} |
|
|
</div> |
|
|
); |
|
|
|
|
|
const CheckboxGroup = ({ label, options, selected, onChange, error }) => ( |
|
|
<div style={{ marginBottom: '20px' }}> |
|
|
<label style={{ color: COLORS.textPrimary, fontSize: '14px', fontWeight: '500', display: 'block', marginBottom: '12px' }}>{label} <span style={{ color: COLORS.error }}>*</span></label> |
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}> |
|
|
{options.map((opt) => ( |
|
|
<button key={opt.value} type="button" onClick={() => onChange(opt.value)} style={{ padding: '14px 16px', background: COLORS.white, border: `1.5px solid ${selected.includes(opt.value) ? COLORS.whatsappGreen : COLORS.inputBorder}`, borderRadius: '8px', color: COLORS.textPrimary, fontSize: '15px', textAlign: 'left', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '12px' }}> |
|
|
<div style={{ width: '20px', height: '20px', borderRadius: '4px', border: `2px solid ${selected.includes(opt.value) ? COLORS.whatsappGreen : COLORS.inputBorder}`, background: selected.includes(opt.value) ? COLORS.whatsappGreen : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{selected.includes(opt.value) && <svg width="12" height="10" viewBox="0 0 12 10" fill="none"><path d="M1 5L4.5 8.5L11 1" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>}</div> |
|
|
{opt.label} |
|
|
</button> |
|
|
))} |
|
|
</div> |
|
|
{error && <p style={{ color: COLORS.error, fontSize: '12px', marginTop: '4px' }}>{error}</p>} |
|
|
</div> |
|
|
); |
|
|
|
|
|
const Dropdown = ({ label, options, selected, onChange, placeholder, error, required = true }) => ( |
|
|
<div style={{ marginBottom: '16px' }}> |
|
|
{label && <label style={{ color: COLORS.textPrimary, fontSize: '14px', fontWeight: '500', display: 'block', marginBottom: '8px' }}>{label} {required && <span style={{ color: COLORS.error }}>*</span>}</label>} |
|
|
<select value={selected} onChange={(e) => onChange(e.target.value)} style={{ width: '100%', padding: '14px 16px', background: COLORS.inputBg, border: `1px solid ${error ? COLORS.error : COLORS.inputBorder}`, borderRadius: '8px', color: selected ? COLORS.textPrimary : COLORS.textSecondary, fontSize: '15px', outline: 'none', cursor: 'pointer', appearance: 'none', backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667781' d='M6 8L1 3h10z'/%3E%3C/svg%3E")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 16px center' }}> |
|
|
<option value="" disabled>{placeholder}</option> |
|
|
{options.map((opt) => <option key={opt.value} value={opt.value}>{opt.label}</option>)} |
|
|
</select> |
|
|
{error && <p style={{ color: COLORS.error, fontSize: '12px', marginTop: '4px' }}>{error}</p>} |
|
|
</div> |
|
|
); |
|
|
|
|
|
const InfoBox = ({ children, type = 'info', icon }) => ( |
|
|
<div style={{ background: type === 'warning' ? '#FFF3CD' : type === 'success' ? '#E8F5E9' : '#E7F3FF', border: `1px solid ${type === 'warning' ? '#FFCC00' : type === 'success' ? '#81C784' : '#B3D7FF'}`, borderRadius: '8px', padding: '12px 14px', marginBottom: '16px', display: 'flex', gap: '10px', alignItems: 'flex-start' }}> |
|
|
<span style={{ fontSize: '16px' }}>{icon || (type === 'warning' ? '⚠️' : type === 'success' ? '🔒' : 'ℹ️')}</span> |
|
|
<p style={{ color: COLORS.textPrimary, fontSize: '13px', lineHeight: '1.5', margin: 0 }}>{children}</p> |
|
|
</div> |
|
|
); |
|
|
|
|
|
const FooterButton = ({ text, onClick, disabled }) => ( |
|
|
<div style={{ padding: '16px', background: COLORS.white, borderTop: `1px solid ${COLORS.inputBorder}` }}> |
|
|
<button type="button" onClick={onClick} disabled={disabled} style={{ width: '100%', padding: '16px', background: disabled ? '#ccc' : COLORS.whatsappGreen, border: 'none', borderRadius: '24px', color: '#fff', fontSize: '16px', fontWeight: '600', cursor: disabled ? 'not-allowed' : 'pointer' }}>{text}</button> |
|
|
</div> |
|
|
); |
|
|
|
|
|
const Checkbox = ({ checked, onChange, label, error }) => ( |
|
|
<div style={{ marginBottom: '16px' }}> |
|
|
<button type="button" onClick={() => onChange(!checked)} style={{ display: 'flex', alignItems: 'flex-start', gap: '12px', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left', padding: 0 }}> |
|
|
<div style={{ width: '22px', height: '22px', borderRadius: '4px', border: `2px solid ${checked ? COLORS.whatsappGreen : error ? COLORS.error : COLORS.inputBorder}`, background: checked ? COLORS.whatsappGreen : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: '2px' }}>{checked && <svg width="12" height="10" viewBox="0 0 12 10" fill="none"><path d="M1 5L4.5 8.5L11 1" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>}</div> |
|
|
<span style={{ color: COLORS.textPrimary, fontSize: '14px', lineHeight: '1.5' }}>{label}</span> |
|
|
</button> |
|
|
{error && <p style={{ color: COLORS.error, fontSize: '12px', marginTop: '4px', marginLeft: '34px' }}>{error}</p>} |
|
|
</div> |
|
|
); |
|
|
|
|
|
const FeatureCard = ({ emoji, title, examples }) => ( |
|
|
<div style={{ background: '#F8F9FA', borderRadius: '12px', padding: '16px', marginBottom: '12px' }}> |
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}> |
|
|
<span style={{ fontSize: '24px' }}>{emoji}</span> |
|
|
<span style={{ color: COLORS.textPrimary, fontWeight: '600', fontSize: '15px' }}>{title}</span> |
|
|
</div> |
|
|
<div style={{ marginLeft: '34px' }}> |
|
|
{examples.map((ex, i) => ( |
|
|
<div key={i} style={{ background: COLORS.bubbleOut, borderRadius: '8px', padding: '10px 12px', marginBottom: i < examples.length - 1 ? '8px' : 0, color: COLORS.textPrimary, fontSize: '13px' }}> |
|
|
"{ex}" |
|
|
</div> |
|
|
))} |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
|
|
|
const TimelineItem = ({ time, description, isLast }) => ( |
|
|
<div style={{ display: 'flex', gap: '12px', marginBottom: isLast ? 0 : '16px' }}> |
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}> |
|
|
<div style={{ width: '32px', height: '32px', borderRadius: '50%', background: COLORS.whatsappGreen, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: '12px', fontWeight: '600' }}>{time}</div> |
|
|
{!isLast && <div style={{ width: '2px', height: '24px', background: '#E0E0E0', marginTop: '4px' }} />} |
|
|
</div> |
|
|
<div style={{ flex: 1, paddingTop: '6px' }}> |
|
|
<p style={{ color: COLORS.textPrimary, fontSize: '14px', lineHeight: '1.4' }}>{description}</p> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
|
|
|
const StepItem = ({ number, title, description }) => ( |
|
|
<div style={{ display: 'flex', gap: '14px', marginBottom: '16px' }}> |
|
|
<div style={{ width: '28px', height: '28px', borderRadius: '50%', background: COLORS.whatsappGreen, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: '14px', fontWeight: '600', flexShrink: 0 }}>{number}</div> |
|
|
<div style={{ flex: 1 }}> |
|
|
<p style={{ color: COLORS.textPrimary, fontWeight: '600', fontSize: '14px', marginBottom: '4px' }}>{title}</p> |
|
|
<p style={{ color: COLORS.textSecondary, fontSize: '13px', lineHeight: '1.4' }}>{description}</p> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
|
|
|
const OnboardingSimulation = () => { |
|
|
const [currentScreen, setCurrentScreen] = useState(0); |
|
|
const [errors, setErrors] = useState({}); |
|
|
const [formData, setFormData] = useState({ |
|
|
nome: '', cpf: '', email: '', aceitaTermos: false, |
|
|
expectativa: '', tipoControle: [], |
|
|
atividadeEmpresa: '', faturamentoEmpresa: '', |
|
|
profissao: '', experienciaApp: '', qualApp: '', comoConheceu: '', |
|
|
metodoRegistro: '', |
|
|
gastoMensal: '', ganhoMensal: '', |
|
|
cartoes: [], cartaoPrincipal: '', outroCartao: '', |
|
|
temDividas: '', dividas: [{ tipo: '', valor: '', prazo: '' }], |
|
|
metas: [{ descricao: '', prazo: '' }] |
|
|
}); |
|
|
const [isAnimating, setIsAnimating] = useState(false); |
|
|
const [showChat, setShowChat] = useState(true); |
|
|
const [chatMessages, setChatMessages] = useState([{ type: 'bot', text: 'Olá, Daniel!\n\nAqui é o Assistente de Bolso, seja bem-vindo! A partir de hoje, vou te ajudar a cuidar das suas finanças e compromissos.\n\nPara te atender da melhor forma possível, preciso que você responda a algumas perguntas com sinceridade. Vamos começar?' }]); |
|
|
const [showStartButton, setShowStartButton] = useState(true); |
|
|
|
|
|
const formatCPF = (value) => { const n = value.replace(/\D/g, ''); return n.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4').slice(0, 14); }; |
|
|
const formatCurrency = (value) => { const n = value.replace(/\D/g, ''); if (!n) return ''; return 'R$ ' + parseInt(n).toLocaleString('pt-BR'); }; |
|
|
|
|
|
const usaRegistroAutomatico = formData.metodoRegistro === 'automatico' || formData.metodoRegistro === 'ambos'; |
|
|
const controlaEmpresa = formData.tipoControle.includes('empresa'); |
|
|
const controlaApenasEmpresa = formData.tipoControle.length === 1 && formData.tipoControle.includes('empresa'); |
|
|
|
|
|
// Calcula telas dinâmicas |
|
|
const getScreenSequence = () => { |
|
|
let screens = ['dados', 'expectativas']; |
|
|
if (controlaEmpresa) screens.push('empresa'); |
|
|
if (!controlaApenasEmpresa) screens.push('sobreVoce'); |
|
|
else screens.push('sobreVoceEmpresa'); // versão sem profissão |
|
|
screens.push('metodoRegistro', 'rendaGastos', 'cartoes', 'dividas'); |
|
|
if (formData.temDividas === 'sim') screens.push('detalhesDividas'); |
|
|
screens.push('metas', 'tutorialRegistro'); |
|
|
if (usaRegistroAutomatico) { |
|
|
screens.push('tutorialAutomatico'); |
|
|
screens.push('tutorialConexao'); // Nova tela de como conectar |
|
|
} |
|
|
screens.push('tutorialDashboard', 'tutorialLembretes', 'pronto'); |
|
|
return screens; |
|
|
}; |
|
|
|
|
|
const screenSequence = getScreenSequence(); |
|
|
const currentScreenName = screenSequence[currentScreen] || 'dados'; |
|
|
|
|
|
const validateScreen = () => { |
|
|
const newErrors = {}; |
|
|
if (currentScreenName === 'dados') { |
|
|
if (!formData.nome.trim()) newErrors.nome = 'Campo obrigatório'; |
|
|
if (!formData.cpf.trim()) newErrors.cpf = 'Campo obrigatório'; |
|
|
else if (formData.cpf.replace(/\D/g, '').length !== 11) newErrors.cpf = 'CPF inválido'; |
|
|
if (!formData.email.trim()) newErrors.email = 'Campo obrigatório'; |
|
|
else if (!/\S+@\S+\.\S+/.test(formData.email)) newErrors.email = 'E-mail inválido'; |
|
|
if (!formData.aceitaTermos) newErrors.aceitaTermos = 'Você precisa aceitar os termos'; |
|
|
} else if (currentScreenName === 'expectativas') { |
|
|
if (!formData.expectativa.trim()) newErrors.expectativa = 'Campo obrigatório'; |
|
|
if (formData.tipoControle.length === 0) newErrors.tipoControle = 'Selecione pelo menos uma opção'; |
|
|
} else if (currentScreenName === 'empresa') { |
|
|
if (!formData.atividadeEmpresa.trim()) newErrors.atividadeEmpresa = 'Campo obrigatório'; |
|
|
if (!formData.faturamentoEmpresa) newErrors.faturamentoEmpresa = 'Selecione uma opção'; |
|
|
} else if (currentScreenName === 'sobreVoce') { |
|
|
if (!formData.profissao.trim()) newErrors.profissao = 'Campo obrigatório'; |
|
|
if (!formData.experienciaApp) newErrors.experienciaApp = 'Selecione uma opção'; |
|
|
if ((formData.experienciaApp === 'desisti' || formData.experienciaApp === 'uso') && !formData.qualApp.trim()) newErrors.qualApp = 'Campo obrigatório'; |
|
|
if (!formData.comoConheceu) newErrors.comoConheceu = 'Selecione uma opção'; |
|
|
} else if (currentScreenName === 'sobreVoceEmpresa') { |
|
|
if (!formData.experienciaApp) newErrors.experienciaApp = 'Selecione uma opção'; |
|
|
if ((formData.experienciaApp === 'desisti' || formData.experienciaApp === 'uso') && !formData.qualApp.trim()) newErrors.qualApp = 'Campo obrigatório'; |
|
|
if (!formData.comoConheceu) newErrors.comoConheceu = 'Selecione uma opção'; |
|
|
} else if (currentScreenName === 'metodoRegistro') { |
|
|
if (!formData.metodoRegistro) newErrors.metodoRegistro = 'Selecione uma opção'; |
|
|
} else if (currentScreenName === 'rendaGastos') { |
|
|
if (!formData.gastoMensal.trim()) newErrors.gastoMensal = 'Campo obrigatório'; |
|
|
if (!formData.ganhoMensal.trim()) newErrors.ganhoMensal = 'Campo obrigatório'; |
|
|
} else if (currentScreenName === 'cartoes') { |
|
|
if (formData.cartoes.length === 0) newErrors.cartoes = 'Selecione pelo menos uma opção'; |
|
|
if (formData.cartoes.length > 0 && !formData.cartoes.includes('nenhum') && !formData.cartaoPrincipal) newErrors.cartaoPrincipal = 'Selecione seu cartão principal'; |
|
|
} else if (currentScreenName === 'dividas') { |
|
|
if (!formData.temDividas) newErrors.temDividas = 'Selecione uma opção'; |
|
|
} else if (currentScreenName === 'detalhesDividas') { |
|
|
formData.dividas.forEach((d, i) => { if (!d.tipo) newErrors[`divida_tipo_${i}`] = 'Obrigatório'; if (!d.valor) newErrors[`divida_valor_${i}`] = 'Obrigatório'; if (!d.prazo) newErrors[`divida_prazo_${i}`] = 'Obrigatório'; }); |
|
|
} else if (currentScreenName === 'metas') { |
|
|
formData.metas.forEach((m, i) => { if (!m.descricao.trim()) newErrors[`meta_desc_${i}`] = 'Obrigatório'; }); |
|
|
} |
|
|
setErrors(newErrors); |
|
|
return Object.keys(newErrors).length === 0; |
|
|
}; |
|
|
|
|
|
const handleNext = () => { |
|
|
if (!validateScreen()) return; |
|
|
setIsAnimating(true); |
|
|
setTimeout(() => { |
|
|
if (currentScreen < screenSequence.length - 1) { |
|
|
setCurrentScreen(prev => prev + 1); |
|
|
} else { |
|
|
setCurrentScreen(100); // Final |
|
|
} |
|
|
setIsAnimating(false); |
|
|
setErrors({}); |
|
|
}, 200); |
|
|
}; |
|
|
|
|
|
const handleBack = () => { |
|
|
setIsAnimating(true); |
|
|
setTimeout(() => { |
|
|
if (currentScreen === 0) { |
|
|
setShowChat(true); |
|
|
setShowStartButton(true); |
|
|
} else { |
|
|
setCurrentScreen(prev => prev - 1); |
|
|
} |
|
|
setIsAnimating(false); |
|
|
setErrors({}); |
|
|
}, 200); |
|
|
}; |
|
|
|
|
|
const handleStartOnboarding = () => { setShowStartButton(false); setChatMessages(prev => [...prev, { type: 'user', text: 'Sim, vamos começar!' }]); setTimeout(() => setShowChat(false), 600); }; |
|
|
const handleFinish = () => setCurrentScreen(100); |
|
|
const updateFormData = (field, value) => { setFormData(prev => ({ ...prev, [field]: value })); setErrors(prev => ({ ...prev, [field]: null })); }; |
|
|
const toggleArrayField = (field, value) => { |
|
|
setFormData(prev => { |
|
|
let newArray; |
|
|
if (value === 'nenhum') { |
|
|
newArray = prev[field].includes('nenhum') ? [] : ['nenhum']; |
|
|
} else { |
|
|
newArray = prev[field].filter(v => v !== 'nenhum'); |
|
|
newArray = newArray.includes(value) ? newArray.filter(v => v !== value) : [...newArray, value]; |
|
|
} |
|
|
return { ...prev, [field]: newArray }; |
|
|
}); |
|
|
setErrors(prev => ({ ...prev, [field]: null })); |
|
|
}; |
|
|
const addDivida = () => setFormData(prev => ({ ...prev, dividas: [...prev.dividas, { tipo: '', valor: '', prazo: '' }] })); |
|
|
const removeDivida = (index) => { if (formData.dividas.length > 1) setFormData(prev => ({ ...prev, dividas: prev.dividas.filter((_, i) => i !== index) })); }; |
|
|
const updateDivida = (index, field, value) => setFormData(prev => ({ ...prev, dividas: prev.dividas.map((d, i) => i === index ? { ...d, [field]: value } : d) })); |
|
|
const addMeta = () => setFormData(prev => ({ ...prev, metas: [...prev.metas, { descricao: '', prazo: '' }] })); |
|
|
const removeMeta = (index) => { if (formData.metas.length > 1) setFormData(prev => ({ ...prev, metas: prev.metas.filter((_, i) => i !== index) })); }; |
|
|
const updateMeta = (index, field, value) => setFormData(prev => ({ ...prev, metas: prev.metas.map((m, i) => i === index ? { ...m, [field]: value } : m) })); |
|
|
|
|
|
if (showChat) { |
|
|
return ( |
|
|
<div style={{ width: '100%', maxWidth: '390px', height: '844px', margin: '0 auto', background: COLORS.white, borderRadius: '24px', overflow: 'hidden', position: 'relative', boxShadow: '0 25px 50px -12px rgba(0,0,0,0.25)' }}> |
|
|
<div style={{ padding: '12px 24px', background: COLORS.tealDark, display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: '#fff', fontSize: '14px', fontWeight: '500' }}><span>9:41</span><div style={{ display: 'flex', gap: '6px' }}><svg width="18" height="12" viewBox="0 0 18 12" fill="white"><path d="M1 4.5h2v7H1zM5 3h2v8.5H5zM9 1.5h2V12H9zM13 0h2v12h-2z" opacity="0.3"/><path d="M1 4.5h2v7H1zM5 3h2v8.5H5zM9 1.5h2V12H9z"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="white"><path d="M8 2.4c2.4 0 4.5 1 6 2.6l-1.4 1.4c-1.2-1.2-2.8-2-4.6-2s-3.4.8-4.6 2L2 5c1.5-1.6 3.6-2.6 6-2.6zM8 5.6c1.4 0 2.7.6 3.6 1.6L10.2 8.6c-.6-.6-1.4-1-2.2-1s-1.6.4-2.2 1L4.4 7.2c.9-1 2.2-1.6 3.6-1.6zM8 8.8c.6 0 1.2.3 1.6.8L8 11.2l-1.6-1.6c.4-.5 1-.8 1.6-.8z"/></svg><svg width="27" height="12" viewBox="0 0 27 12" fill="white"><rect x="0.5" y="0.5" width="23" height="11" rx="2.5" stroke="white" strokeOpacity="0.35" fill="none"/><rect x="2" y="2" width="19" height="8" rx="1.5" fill="white"/></svg></div></div> |
|
|
<div style={{ padding: '10px 16px', background: COLORS.headerBg, display: 'flex', alignItems: 'center', gap: '12px' }}><svg width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg><div style={{ width: '40px', height: '40px', borderRadius: '50%', background: '#DFE5E7', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '20px' }}>🤖</div><div style={{ flex: 1 }}><div style={{ color: '#fff', fontWeight: '500', fontSize: '16px' }}>Assistente de Bolso</div><div style={{ color: 'rgba(255,255,255,0.8)', fontSize: '13px' }}>online</div></div></div> |
|
|
<div style={{ padding: '16px', background: COLORS.chatBg, height: 'calc(100% - 150px)', overflowY: 'auto' }}> |
|
|
{chatMessages.map((msg, idx) => <div key={idx} style={{ display: 'flex', justifyContent: msg.type === 'user' ? 'flex-end' : 'flex-start', marginBottom: '8px' }}><div style={{ maxWidth: '85%', padding: '8px 12px', borderRadius: msg.type === 'user' ? '8px 8px 0 8px' : '8px 8px 8px 0', background: msg.type === 'user' ? COLORS.bubbleOut : COLORS.bubbleIn, color: COLORS.textPrimary, fontSize: '14.5px', lineHeight: '1.45', boxShadow: '0 1px 0.5px rgba(11,20,26,0.13)', whiteSpace: 'pre-line' }}>{msg.text}<div style={{ fontSize: '11px', color: COLORS.textSecondary, textAlign: 'right', marginTop: '4px' }}>09:41 {msg.type === 'user' && '✓✓'}</div></div></div>)} |
|
|
</div> |
|
|
{showStartButton && <div style={{ position: 'absolute', bottom: '80px', left: '16px', right: '16px' }}><button type="button" onClick={handleStartOnboarding} style={{ width: '100%', padding: '14px', background: COLORS.whatsappGreen, border: 'none', borderRadius: '24px', color: '#fff', fontSize: '15px', fontWeight: '600', cursor: 'pointer', boxShadow: '0 4px 12px rgba(0,168,132,0.3)' }}>Começar cadastro</button></div>} |
|
|
<div style={{ position: 'absolute', bottom: '0', left: '0', right: '0', padding: '8px 8px 24px 8px', background: '#F0F2F5', display: 'flex', gap: '8px', alignItems: 'center' }}><div style={{ flex: 1, background: COLORS.white, borderRadius: '24px', padding: '10px 16px', color: COLORS.textSecondary, fontSize: '15px' }}>Mensagem</div><div style={{ width: '48px', height: '48px', borderRadius: '50%', background: COLORS.whatsappGreen, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><svg width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M12 15c1.66 0 2.99-1.34 2.99-3L15 6c0-1.66-1.34-3-3-3S9 4.34 9 6v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 15 6.7 12H5c0 3.42 2.72 6.23 6 6.72V22h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/></svg></div></div> |
|
|
</div> |
|
|
); |
|
|
} |
|
|
|
|
|
// Tela final |
|
|
if (currentScreen === 100) { |
|
|
const needsPluggy = usaRegistroAutomatico; |
|
|
return ( |
|
|
<div style={{ width: '100%', maxWidth: '390px', height: '844px', margin: '0 auto', background: COLORS.white, borderRadius: '24px', overflow: 'hidden', boxShadow: '0 25px 50px -12px rgba(0,0,0,0.25)', display: 'flex', flexDirection: 'column' }}> |
|
|
<FlowHeader title="Cadastro concluído" showBack={false} /> |
|
|
<div style={{ flex: 1, padding: '32px 24px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', overflowY: 'auto' }}> |
|
|
<div style={{ width: '80px', height: '80px', borderRadius: '50%', background: '#E7F7EF', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '24px' }}><svg width="40" height="40" viewBox="0 0 24 24" fill={COLORS.whatsappGreen}><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></div> |
|
|
<h2 style={{ color: COLORS.textPrimary, fontSize: '22px', fontWeight: '600', marginBottom: '12px' }}>Tudo pronto, {formData.nome.split(' ')[0] || 'Daniel'}! 🎉</h2> |
|
|
<p style={{ color: COLORS.textSecondary, fontSize: '15px', lineHeight: '1.5', marginBottom: '32px' }}>Seu cadastro foi concluído com sucesso. A partir de agora é só me enviar mensagens por aqui.</p> |
|
|
|
|
|
<div style={{ background: '#F8F9FA', borderRadius: '12px', padding: '16px', width: '100%', textAlign: 'left' }}><p style={{ color: COLORS.textSecondary, fontSize: '12px', marginBottom: '8px', textTransform: 'uppercase', fontWeight: '600' }}>Dica rápida</p><p style={{ color: COLORS.textPrimary, fontSize: '14px', lineHeight: '1.5' }}>Experimente registrar sua primeira despesa agora!</p><div style={{ background: COLORS.bubbleOut, borderRadius: '8px', padding: '10px 14px', marginTop: '10px', color: COLORS.textPrimary, fontSize: '14px' }}>"Almoço 35 reais"</div></div> |
|
|
</div> |
|
|
<FooterButton text="Voltar para o chat" onClick={() => { setCurrentScreen(0); setShowChat(true); setShowStartButton(true); setFormData({ nome: '', cpf: '', email: '', aceitaTermos: false, expectativa: '', tipoControle: [], atividadeEmpresa: '', faturamentoEmpresa: '', profissao: '', experienciaApp: '', qualApp: '', comoConheceu: '', metodoRegistro: '', gastoMensal: '', ganhoMensal: '', cartoes: [], cartaoPrincipal: '', outroCartao: '', temDividas: '', dividas: [{ tipo: '', valor: '', prazo: '' }], metas: [{ descricao: '', prazo: '' }] }); }} /> |
|
|
</div> |
|
|
); |
|
|
} |
|
|
|
|
|
const screenTitles = { |
|
|
dados: 'Dados básicos', |
|
|
expectativas: 'Suas expectativas', |
|
|
empresa: 'Sobre sua empresa', |
|
|
sobreVoce: 'Sobre você', |
|
|
sobreVoceEmpresa: 'Sobre você', |
|
|
metodoRegistro: 'Método de registro', |
|
|
rendaGastos: 'Renda e gastos', |
|
|
cartoes: 'Seus cartões', |
|
|
dividas: 'Dívidas', |
|
|
detalhesDividas: 'Detalhes das dívidas', |
|
|
metas: 'Metas financeiras', |
|
|
tutorialRegistro: 'Registrar movimentações', |
|
|
tutorialAutomatico: 'Registro automático', |
|
|
tutorialConexao: 'Conectar suas contas', |
|
|
tutorialDashboard: 'Seu dashboard', |
|
|
tutorialLembretes: 'Lembretes', |
|
|
pronto: 'Pronto para começar!' |
|
|
}; |
|
|
|
|
|
const totalSteps = screenSequence.length; |
|
|
|
|
|
return ( |
|
|
<div style={{ width: '100%', maxWidth: '390px', height: '844px', margin: '0 auto', background: COLORS.white, borderRadius: '24px', overflow: 'hidden', boxShadow: '0 25px 50px -12px rgba(0,0,0,0.25)', display: 'flex', flexDirection: 'column' }}> |
|
|
<div style={{ padding: '12px 24px', background: COLORS.tealDark, display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: '#fff', fontSize: '14px', fontWeight: '500' }}><span>9:41</span><div style={{ display: 'flex', gap: '6px' }}><svg width="18" height="12" viewBox="0 0 18 12" fill="white"><path d="M1 4.5h2v7H1zM5 3h2v8.5H5zM9 1.5h2V12H9zM13 0h2v12h-2z" opacity="0.3"/><path d="M1 4.5h2v7H1zM5 3h2v8.5H5zM9 1.5h2V12H9z"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="white"><path d="M8 2.4c2.4 0 4.5 1 6 2.6l-1.4 1.4c-1.2-1.2-2.8-2-4.6-2s-3.4.8-4.6 2L2 5c1.5-1.6 3.6-2.6 6-2.6zM8 5.6c1.4 0 2.7.6 3.6 1.6L10.2 8.6c-.6-.6-1.4-1-2.2-1s-1.6.4-2.2 1L4.4 7.2c.9-1 2.2-1.6 3.6-1.6zM8 8.8c.6 0 1.2.3 1.6.8L8 11.2l-1.6-1.6c.4-.5 1-.8 1.6-.8z"/></svg><svg width="27" height="12" viewBox="0 0 27 12" fill="white"><rect x="0.5" y="0.5" width="23" height="11" rx="2.5" stroke="white" strokeOpacity="0.35" fill="none"/><rect x="2" y="2" width="19" height="8" rx="1.5" fill="white"/></svg></div></div> |
|
|
<FlowHeader title={screenTitles[currentScreenName]} onBack={handleBack} /> |
|
|
<div style={{ padding: '12px 16px', background: '#F8F9FA', display: 'flex', alignItems: 'center', gap: '8px' }}><div style={{ flex: 1, height: '4px', background: '#E0E0E0', borderRadius: '2px', overflow: 'hidden' }}><div style={{ height: '100%', width: `${((currentScreen + 1) / totalSteps) * 100}%`, background: COLORS.whatsappGreen, borderRadius: '2px', transition: 'width 0.3s ease' }} /></div><span style={{ color: COLORS.textSecondary, fontSize: '12px', fontWeight: '500' }}>{currentScreen + 1}/{totalSteps}</span></div> |
|
|
<div style={{ flex: 1, padding: '20px 16px', overflowY: 'auto', opacity: isAnimating ? 0.5 : 1, transition: 'opacity 0.2s ease' }}> |
|
|
|
|
|
{currentScreenName === 'dados' && <> |
|
|
<TextSubheading>Preencha seus dados básicos</TextSubheading> |
|
|
<BodyText>Precisamos dessas informações para criar seu cadastro.</BodyText> |
|
|
<TextInput label="Nome completo" value={formData.nome} onChange={(v) => updateFormData('nome', v)} placeholder="Digite seu nome" error={errors.nome} /> |
|
|
<TextInput label="CPF" value={formData.cpf} onChange={(v) => updateFormData('cpf', formatCPF(v))} placeholder="000.000.000-00" error={errors.cpf} /> |
|
|
<TextInput label="E-mail" type="email" value={formData.email} onChange={(v) => updateFormData('email', v)} placeholder="seu@email.com" error={errors.email} hint="Usado para conectar sua agenda Google." /> |
|
|
<InfoBox type="success">Todas as suas informações são protegidas com <strong>criptografia de ponta a ponta</strong>. Seus dados estão seguros.</InfoBox> |
|
|
<Checkbox checked={formData.aceitaTermos} onChange={(v) => updateFormData('aceitaTermos', v)} label={<span>Li e aceito os <a href="#" style={{ color: COLORS.whatsappGreen, textDecoration: 'underline' }}>Termos de Uso</a> e a <a href="#" style={{ color: COLORS.whatsappGreen, textDecoration: 'underline' }}>Política de Privacidade</a></span>} error={errors.aceitaTermos} /> |
|
|
</>} |
|
|
|
|
|
{currentScreenName === 'expectativas' && <> |
|
|
<TextSubheading>O que você espera do Assistente?</TextSubheading> |
|
|
<BodyText>Conte suas expectativas e o que você quer controlar.</BodyText> |
|
|
<TextArea label="Em poucas palavras, o que você espera do Assistente de Bolso?" value={formData.expectativa} onChange={(v) => updateFormData('expectativa', v)} placeholder="Ex: parar de estourar o cartão todo mês, organizar minhas contas..." error={errors.expectativa} /> |
|
|
<CheckboxGroup label="O que você quer controlar?" options={[{ value: 'pessoal', label: 'Finanças pessoais' }, { value: 'empresa', label: 'Finanças da empresa' }, { value: 'familia', label: 'Finanças da família' }, { value: 'outro', label: 'Outro' }]} selected={formData.tipoControle} onChange={(v) => toggleArrayField('tipoControle', v)} error={errors.tipoControle} /> |
|
|
</>} |
|
|
|
|
|
{currentScreenName === 'empresa' && <> |
|
|
<TextSubheading>Conte sobre sua empresa</TextSubheading> |
|
|
<BodyText>Essas informações me ajudam a personalizar as orientações para o seu negócio.</BodyText> |
|
|
<TextArea label="O que sua empresa faz?" value={formData.atividadeEmpresa} onChange={(v) => updateFormData('atividadeEmpresa', v)} placeholder="Ex: Vendo roupas online, tenho uma consultoria de marketing, sou dono de um restaurante..." rows={3} error={errors.atividadeEmpresa} /> |
|
|
<Dropdown label="Qual o faturamento mensal médio?" options={[{ value: 'ate5k', label: 'Até R$ 5.000' }, { value: '5k-15k', label: 'R$ 5.000 a R$ 15.000' }, { value: '15k-50k', label: 'R$ 15.000 a R$ 50.000' }, { value: '50k-100k', label: 'R$ 50.000 a R$ 100.000' }, { value: '100k-500k', label: 'R$ 100.000 a R$ 500.000' }, { value: '500k+', label: 'Acima de R$ 500.000' }, { value: 'naosei', label: 'Prefiro não informar' }]} selected={formData.faturamentoEmpresa} onChange={(v) => updateFormData('faturamentoEmpresa', v)} placeholder="Selecione o faturamento" error={errors.faturamentoEmpresa} /> |
|
|
<InfoBox type="info">Essas informações são confidenciais e serão usadas apenas para personalizar sua experiência.</InfoBox> |
|
|
</>} |
|
|
|
|
|
{currentScreenName === 'sobreVoce' && <> |
|
|
<TextSubheading>Conte um pouco sobre você</TextSubheading> |
|
|
<BodyText>Queremos te conhecer melhor para personalizar sua experiência.</BodyText> |
|
|
<TextInput label="Profissão ou atividade principal" value={formData.profissao} onChange={(v) => updateFormData('profissao', v)} placeholder="Ex: Empresário, Desenvolvedor..." error={errors.profissao} /> |
|
|
<RadioButtonsGroup label="Você já usou algum app de controle financeiro antes?" options={[{ value: 'nunca', label: 'Nunca usei' }, { value: 'desisti', label: 'Já usei, mas não continuei' }, { value: 'uso', label: 'Uso outro atualmente' }]} selected={formData.experienciaApp} onChange={(v) => updateFormData('experienciaApp', v)} error={errors.experienciaApp} /> |
|
|
{(formData.experienciaApp === 'desisti' || formData.experienciaApp === 'uso') && ( |
|
|
<TextInput label="Qual app você usou/usa? O que achou?" value={formData.qualApp} onChange={(v) => updateFormData('qualApp', v)} placeholder="Ex: Mobills, achei complicado..." error={errors.qualApp} /> |
|
|
)} |
|
|
<Dropdown label="Como você conheceu o Assistente de Bolso?" options={[{ value: 'amigo', label: 'Indicação de amigo' }, { value: 'instagram', label: 'Instagram' }, { value: 'google', label: 'Google' }, { value: 'tiktok', label: 'TikTok' }, { value: 'outro', label: 'Outro' }]} selected={formData.comoConheceu} onChange={(v) => updateFormData('comoConheceu', v)} placeholder="Selecione uma opção" error={errors.comoConheceu} /> |
|
|
</>} |
|
|
|
|
|
{currentScreenName === 'sobreVoceEmpresa' && <> |
|
|
<TextSubheading>Conte um pouco sobre você</TextSubheading> |
|
|
<BodyText>Queremos te conhecer melhor para personalizar sua experiência.</BodyText> |
|
|
<RadioButtonsGroup label="Você já usou algum app de controle financeiro antes?" options={[{ value: 'nunca', label: 'Nunca usei' }, { value: 'desisti', label: 'Já usei, mas não continuei' }, { value: 'uso', label: 'Uso outro atualmente' }]} selected={formData.experienciaApp} onChange={(v) => updateFormData('experienciaApp', v)} error={errors.experienciaApp} /> |
|
|
{(formData.experienciaApp === 'desisti' || formData.experienciaApp === 'uso') && ( |
|
|
<TextInput label="Qual app você usou/usa? O que achou?" value={formData.qualApp} onChange={(v) => updateFormData('qualApp', v)} placeholder="Ex: Mobills, achei complicado..." error={errors.qualApp} /> |
|
|
)} |
|
|
<Dropdown label="Como você conheceu o Assistente de Bolso?" options={[{ value: 'amigo', label: 'Indicação de amigo' }, { value: 'instagram', label: 'Instagram' }, { value: 'google', label: 'Google' }, { value: 'tiktok', label: 'TikTok' }, { value: 'outro', label: 'Outro' }]} selected={formData.comoConheceu} onChange={(v) => updateFormData('comoConheceu', v)} placeholder="Selecione uma opção" error={errors.comoConheceu} /> |
|
|
</>} |
|
|
|
|
|
{currentScreenName === 'metodoRegistro' && <> |
|
|
<TextSubheading>Como você quer registrar suas finanças?</TextSubheading> |
|
|
<BodyText>Escolha como prefere registrar suas despesas e receitas.</BodyText> |
|
|
<RadioButtonsGroup label="Escolha uma opção" options={[{ value: 'automatico', label: 'Conexão automática com contas bancárias' }, { value: 'manual', label: 'Registro manual por texto, foto ou áudio' }, { value: 'ambos', label: 'Quero usar as duas formas acima' }]} selected={formData.metodoRegistro} onChange={(v) => updateFormData('metodoRegistro', v)} error={errors.metodoRegistro} /> |
|
|
{(formData.metodoRegistro === 'automatico' || formData.metodoRegistro === 'ambos') && <InfoBox>Para conexão automática, usamos um parceiro seguro chamado <strong>Pluggy</strong>. Você receberá um link para conectar suas contas ao final do cadastro.</InfoBox>} |
|
|
<InfoBox type="info">Se mudar de ideia no futuro, é só avisar o assistente!</InfoBox> |
|
|
</>} |
|
|
|
|
|
{currentScreenName === 'rendaGastos' && <> |
|
|
<TextSubheading>Qual sua renda e seus gastos mensais?</TextSubheading> |
|
|
<BodyText>Informe uma estimativa para eu entender sua situação financeira.</BodyText> |
|
|
<TextInput label="Quanto você ganha por mês?" value={formData.ganhoMensal} onChange={(v) => updateFormData('ganhoMensal', formatCurrency(v))} placeholder="R$ 0" error={errors.ganhoMensal} /> |
|
|
<TextInput label="Quanto você gasta por mês?" value={formData.gastoMensal} onChange={(v) => updateFormData('gastoMensal', formatCurrency(v))} placeholder="R$ 0" error={errors.gastoMensal} hint="Depois eu te mostro se está batendo com a realidade." /> |
|
|
</>} |
|
|
|
|
|
{currentScreenName === 'cartoes' && <> |
|
|
<TextSubheading>Quais cartões de crédito você usa?</TextSubheading> |
|
|
<BodyText>Com essa informação vou conseguir te ajudar a organizar seus gastos, e inclusive a entender se os cartões que você usa são os melhores para o seu perfil.</BodyText> |
|
|
<CheckboxGroup label="Selecione seus cartões" options={[{ value: 'nubank', label: 'Nubank' }, { value: 'inter', label: 'Inter' }, { value: 'c6', label: 'C6 Bank' }, { value: 'itau', label: 'Itaú' }, { value: 'bradesco', label: 'Bradesco' }, { value: 'santander', label: 'Santander' }, { value: 'bb', label: 'Banco do Brasil' }, { value: 'caixa', label: 'Caixa' }, { value: 'xp', label: 'XP' }, { value: 'outro', label: 'Outro' }, { value: 'nenhum', label: 'Não uso cartão de crédito' }]} selected={formData.cartoes} onChange={(v) => toggleArrayField('cartoes', v)} error={errors.cartoes} /> |
|
|
{formData.cartoes.includes('outro') && <TextInput label="Qual outro cartão?" value={formData.outroCartao} onChange={(v) => updateFormData('outroCartao', v)} placeholder="Ex: Neon, PicPay..." required={false} />} |
|
|
{formData.cartoes.length > 0 && !formData.cartoes.includes('nenhum') && ( |
|
|
<Dropdown label="Qual é seu cartão principal?" options={formData.cartoes.filter(c => c !== 'outro' && c !== 'nenhum').map(c => ({ value: c, label: { nubank: 'Nubank', inter: 'Inter', c6: 'C6 Bank', itau: 'Itaú', bradesco: 'Bradesco', santander: 'Santander', bb: 'Banco do Brasil', caixa: 'Caixa', xp: 'XP' }[c] || c })).concat(formData.cartoes.includes('outro') && formData.outroCartao ? [{ value: 'outro', label: formData.outroCartao }] : [])} selected={formData.cartaoPrincipal} onChange={(v) => updateFormData('cartaoPrincipal', v)} placeholder="Selecione o cartão principal" error={errors.cartaoPrincipal} /> |
|
|
)} |
|
|
</>} |
|
|
|
|
|
{currentScreenName === 'dividas' && <> |
|
|
<TextSubheading>Você possui dívidas atualmente?</TextSubheading> |
|
|
<BodyText>Saber sobre suas dívidas me ajuda a criar um plano para você quitá-las mais rápido.</BodyText> |
|
|
<InfoBox type="info" icon="💡">Perguntamos sobre dívidas para te ajudar a se organizar e criar estratégias de pagamento. Essas informações são 100% confidenciais.</InfoBox> |
|
|
<RadioButtonsGroup label="Você tem dívidas hoje?" options={[{ value: 'nao', label: 'Não tenho dívidas' }, { value: 'sim', label: 'Sim, tenho dívidas em andamento' }]} selected={formData.temDividas} onChange={(v) => updateFormData('temDividas', v)} error={errors.temDividas} /> |
|
|
</>} |
|
|
|
|
|
{currentScreenName === 'detalhesDividas' && <> |
|
|
<TextSubheading>Detalhe suas dívidas</TextSubheading> |
|
|
<BodyText>Informe cada dívida para que eu possa te ajudar a criar um plano de pagamento.</BodyText> |
|
|
{formData.dividas.map((divida, index) => <div key={index} style={{ background: '#F8F9FA', borderRadius: '12px', padding: '16px', marginBottom: '16px' }}><div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}><span style={{ color: COLORS.textPrimary, fontWeight: '600', fontSize: '14px' }}>Dívida {index + 1}</span>{formData.dividas.length > 1 && <button type="button" onClick={() => removeDivida(index)} style={{ background: 'transparent', border: 'none', color: COLORS.error, fontSize: '13px', cursor: 'pointer', padding: '4px 8px' }}>Remover</button>}</div><Dropdown label="Tipo de dívida" options={[{ value: 'cartao', label: 'Cartão de crédito' }, { value: 'financiamento', label: 'Financiamento' }, { value: 'consignado', label: 'Empréstimo consignado' }, { value: 'pessoal', label: 'Empréstimo pessoal' }, { value: 'cheque', label: 'Cheque especial' }, { value: 'outro', label: 'Outro' }]} selected={divida.tipo} onChange={(v) => updateDivida(index, 'tipo', v)} placeholder="Selecione o tipo" error={errors[`divida_tipo_${index}`]} /><TextInput label="Valor total aproximado" value={divida.valor} onChange={(v) => updateDivida(index, 'valor', formatCurrency(v))} placeholder="R$ 0" error={errors[`divida_valor_${index}`]} /><Dropdown label="Prazo restante" options={[{ value: '6m', label: 'Menos de 6 meses' }, { value: '6-12m', label: 'Entre 6 e 12 meses' }, { value: '1-3a', label: 'Entre 1 e 3 anos' }, { value: '3a+', label: 'Mais de 3 anos' }, { value: 'naosei', label: 'Não sei' }]} selected={divida.prazo} onChange={(v) => updateDivida(index, 'prazo', v)} placeholder="Selecione o prazo" error={errors[`divida_prazo_${index}`]} /></div>)} |
|
|
<button type="button" onClick={addDivida} style={{ width: '100%', padding: '12px', background: 'transparent', border: `1.5px dashed ${COLORS.whatsappGreen}`, borderRadius: '8px', color: COLORS.whatsappGreen, fontSize: '14px', fontWeight: '600', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px' }}><span style={{ fontSize: '18px' }}>+</span> Adicionar outra dívida</button> |
|
|
</>} |
|
|
|
|
|
{currentScreenName === 'metas' && <> |
|
|
<TextSubheading>Defina suas metas financeiras</TextSubheading> |
|
|
<BodyText>Ter metas claras te ajuda a manter o foco. Vou te lembrar e acompanhar seu progresso!</BodyText> |
|
|
{formData.metas.map((meta, index) => <div key={index} style={{ background: '#F8F9FA', borderRadius: '12px', padding: '16px', marginBottom: '16px' }}><div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}><span style={{ color: COLORS.textPrimary, fontWeight: '600', fontSize: '14px' }}>Meta {index + 1}</span>{formData.metas.length > 1 && <button type="button" onClick={() => removeMeta(index)} style={{ background: 'transparent', border: 'none', color: COLORS.error, fontSize: '13px', cursor: 'pointer', padding: '4px 8px' }}>Remover</button>}</div><TextArea label="Descreva sua meta" value={meta.descricao} onChange={(v) => updateMeta(index, 'descricao', v)} placeholder="Ex: Juntar R$ 5.000 para emergências..." rows={2} error={errors[`meta_desc_${index}`]} /><TextInput label="Prazo desejado" value={meta.prazo} onChange={(v) => updateMeta(index, 'prazo', v)} placeholder="Ex: 6 meses, até dezembro..." required={false} /></div>)} |
|
|
<button type="button" onClick={addMeta} style={{ width: '100%', padding: '12px', background: 'transparent', border: `1.5px dashed ${COLORS.whatsappGreen}`, borderRadius: '8px', color: COLORS.whatsappGreen, fontSize: '14px', fontWeight: '600', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px' }}><span style={{ fontSize: '18px' }}>+</span> Adicionar outra meta</button> |
|
|
</>} |
|
|
|
|
|
{currentScreenName === 'tutorialRegistro' && <> |
|
|
<TextSubheading>Veja como registrar movimentações financeiras</TextSubheading> |
|
|
<BodyText>É muito fácil! Basta me enviar uma mensagem como se estivesse falando com um amigo.</BodyText> |
|
|
<FeatureCard emoji="💸" title="Registrar uma despesa" examples={['Almoço 35 reais', 'Uber 22,50 hoje', 'Mercado 180 no débito']} /> |
|
|
<FeatureCard emoji="💰" title="Registrar uma receita" examples={['Recebi 3.500 do salário', 'Freela de 800 reais', 'PIX de 150 do João']} /> |
|
|
<FeatureCard emoji="🔁" title="Registrar algo recorrente" examples={['Aluguel 1.200 todo dia 5', 'Netflix 55,90 todo mês']} /> |
|
|
</>} |
|
|
|
|
|
{currentScreenName === 'tutorialAutomatico' && <> |
|
|
<TextSubheading>Como funciona o registro automático</TextSubheading> |
|
|
<BodyText>Suas transações bancárias serão importadas e categorizadas automaticamente, sem você precisar fazer nada.</BodyText> |
|
|
<div style={{ background: '#F0FDF4', border: `1px solid ${COLORS.whatsappGreen}`, borderRadius: '12px', padding: '20px', marginBottom: '20px' }}> |
|
|
<p style={{ color: COLORS.textPrimary, fontWeight: '600', fontSize: '15px', marginBottom: '16px' }}>⏰ Horários de atualização</p> |
|
|
<TimelineItem time="7h" description="Primeira atualização do dia: importo todas as transações da noite anterior" /> |
|
|
<TimelineItem time="12h" description="Atualização do meio-dia: capturo as transações da manhã" /> |
|
|
<TimelineItem time="16h" description="Atualização da tarde: registro as movimentações do início da tarde" /> |
|
|
<TimelineItem time="20h" description="Última atualização: registro todas as movimentações restantes do dia" isLast /> |
|
|
</div> |
|
|
<div style={{ background: '#F8F9FA', borderRadius: '12px', padding: '16px', marginBottom: '16px' }}> |
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}> |
|
|
<span style={{ fontSize: '20px' }}>🏷️</span> |
|
|
<span style={{ color: COLORS.textPrimary, fontWeight: '600' }}>Categorização inteligente</span> |
|
|
</div> |
|
|
<p style={{ color: COLORS.textSecondary, fontSize: '14px', lineHeight: '1.5' }}>Todas as entradas e saídas são categorizadas automaticamente (alimentação, transporte, lazer, etc.) e registradas no seu dashboard.</p> |
|
|
</div> |
|
|
<InfoBox type="info">Você pode combinar o registro automático com registros manuais sempre que quiser!</InfoBox> |
|
|
</>} |
|
|
|
|
|
{currentScreenName === 'tutorialConexao' && <> |
|
|
<TextSubheading>Como conectar suas contas bancárias</TextSubheading> |
|
|
<BodyText>A conexão é feita via Open Finance, de forma segura e regulamentada pelo Banco Central.</BodyText> |
|
|
|
|
|
<div style={{ background: '#F0FDF4', border: `1px solid ${COLORS.whatsappGreen}`, borderRadius: '12px', padding: '20px', marginBottom: '20px' }}> |
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}> |
|
|
<span style={{ fontSize: '24px' }}>🔗</span> |
|
|
<span style={{ color: COLORS.textPrimary, fontWeight: '600', fontSize: '16px' }}>Passo a passo</span> |
|
|
</div> |
|
|
<StepItem number="1" title="Peça o link de conexão" description="Envie uma mensagem pedindo para conectar sua conta. Pode ser algo como:" /> |
|
|
<div style={{ marginLeft: '42px', marginBottom: '16px' }}> |
|
|
<div style={{ background: COLORS.bubbleOut, borderRadius: '8px', padding: '10px 12px', marginBottom: '6px', color: COLORS.textPrimary, fontSize: '13px' }}>"Quero conectar minha conta"</div> |
|
|
<div style={{ background: COLORS.bubbleOut, borderRadius: '8px', padding: '10px 12px', color: COLORS.textPrimary, fontSize: '13px' }}>"Conectar minha conta bancária"</div> |
|
|
</div> |
|
|
<StepItem number="2" title="Acesse o link da Pluggy" description="Você receberá um link seguro do nosso parceiro Pluggy para fazer a autorização." /> |
|
|
<StepItem number="3" title="Autorize suas contas" description="Selecione os bancos que deseja conectar e siga o passo a passo de autorização de cada um." /> |
|
|
<StepItem number="4" title="Pronto!" description="Assim que a conexão for concluída, suas transações serão importadas automaticamente." /> |
|
|
</div> |
|
|
|
|
|
<div style={{ background: '#F8F9FA', borderRadius: '12px', padding: '16px', marginBottom: '16px' }}> |
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}> |
|
|
<span style={{ fontSize: '20px' }}>🔒</span> |
|
|
<span style={{ color: COLORS.textPrimary, fontWeight: '600' }}>Segurança garantida</span> |
|
|
</div> |
|
|
<p style={{ color: COLORS.textSecondary, fontSize: '14px', lineHeight: '1.5', marginBottom: '8px' }}>A conexão é feita através da <strong>Pluggy</strong>, parceiro certificado pelo Banco Central para Open Finance.</p> |
|
|
<p style={{ color: COLORS.textSecondary, fontSize: '14px', lineHeight: '1.5' }}>Seus dados são criptografados e você pode revogar o acesso a qualquer momento diretamente no app do seu banco.</p> |
|
|
</div> |
|
|
|
|
|
<InfoBox type="info" icon="💡">Você pode conectar suas contas agora ou a qualquer momento depois. É só me pedir o link!</InfoBox> |
|
|
</>} |
|
|
|
|
|
{currentScreenName === 'tutorialDashboard' && <> |
|
|
<TextSubheading>Acompanhe suas finanças no dashboard</TextSubheading> |
|
|
<BodyText>Todas as suas movimentações ficam organizadas em um dashboard que você pode acessar a qualquer momento.</BodyText> |
|
|
<div style={{ background: '#F8F9FA', borderRadius: '12px', padding: '20px', marginBottom: '16px' }}> |
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}> |
|
|
<span style={{ fontSize: '24px' }}>📊</span> |
|
|
<span style={{ color: COLORS.textPrimary, fontWeight: '600', fontSize: '16px' }}>Seu dashboard financeiro</span> |
|
|
</div> |
|
|
<p style={{ color: COLORS.textSecondary, fontSize: '14px', lineHeight: '1.5', marginBottom: '12px' }}>No dashboard você encontra:</p> |
|
|
{['Todas as despesas e receitas (manuais e automáticas)', 'Gráficos de gastos por categoria', 'Evolução do seu saldo', 'Progresso das suas metas'].map((item, i) => ( |
|
|
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}> |
|
|
<span style={{ color: COLORS.whatsappGreen }}>✓</span> |
|
|
<span style={{ color: COLORS.textPrimary, fontSize: '14px' }}>{item}</span> |
|
|
</div> |
|
|
))} |
|
|
</div> |
|
|
<div style={{ background: COLORS.bubbleIn, borderRadius: '12px', padding: '16px', marginBottom: '16px' }}> |
|
|
<p style={{ color: COLORS.textSecondary, fontSize: '12px', marginBottom: '8px', textTransform: 'uppercase', fontWeight: '600' }}>🔗 Como acessar</p> |
|
|
<p style={{ color: COLORS.textPrimary, fontSize: '14px', lineHeight: '1.5' }}>Você receberá um link exclusivo para acessar seu dashboard quando quiser.</p> |
|
|
</div> |
|
|
<FeatureCard emoji="💬" title="Ou pergunte direto pra mim" examples={['Quanto gastei hoje?', 'Quanto gastei no mês?', 'Meus gastos com alimentação']} /> |
|
|
</>} |
|
|
|
|
|
{currentScreenName === 'tutorialLembretes' && <> |
|
|
<TextSubheading>Crie lembretes e nunca esqueça nada</TextSubheading> |
|
|
<BodyText>Posso te lembrar de pagamentos, compromissos e criar eventos na sua agenda.</BodyText> |
|
|
<FeatureCard emoji="💳" title="Lembrete de pagamento" examples={['Me lembra de pagar o cartão dia 15', 'Avisa sobre o aluguel todo dia 5']} /> |
|
|
<FeatureCard emoji="📅" title="Lembrete de compromisso" examples={['Me lembra da reunião amanhã às 14h', 'Dentista dia 20 às 9h']} /> |
|
|
<FeatureCard emoji="📆" title="Evento na agenda Google" examples={['Cria evento: viagem SP dia 10 a 12', 'Agenda reunião quinta às 15h']} /> |
|
|
<InfoBox type="warning">Os lembretes podem levar até 3h para serem registrados. Você será avisado quando estiver tudo certo! ✅</InfoBox> |
|
|
</>} |
|
|
|
|
|
{currentScreenName === 'pronto' && <> |
|
|
<TextSubheading>Você está pronto para começar!</TextSubheading> |
|
|
<BodyText>Agora é só me enviar mensagens por texto, áudio ou foto. Estou aqui para te ajudar!</BodyText> |
|
|
<div style={{ background: '#F0FDF4', border: `1px solid ${COLORS.whatsappGreen}`, borderRadius: '12px', padding: '20px', marginBottom: '20px' }}> |
|
|
<p style={{ color: COLORS.textPrimary, fontWeight: '600', fontSize: '15px', marginBottom: '12px' }}>✨ O que você pode fazer:</p> |
|
|
{[{ i: '💸', t: 'Registrar despesas e receitas' }, { i: '📊', t: 'Ver relatórios e análises' }, { i: '⏰', t: 'Criar lembretes' }, { i: '🎯', t: 'Acompanhar suas metas' }, { i: '💬', t: 'Tirar dúvidas sobre finanças' }].map((item, idx) => <div key={idx} style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: idx < 4 ? '8px' : 0 }}><span style={{ fontSize: '16px' }}>{item.i}</span><span style={{ color: COLORS.textPrimary, fontSize: '14px' }}>{item.t}</span></div>)} |
|
|
</div> |
|
|
{usaRegistroAutomatico && ( |
|
|
<InfoBox type="info" icon="🔗">Na próxima tela você poderá conectar suas contas bancárias automaticamente.</InfoBox> |
|
|
)} |
|
|
<div style={{ background: COLORS.bubbleIn, borderRadius: '12px', padding: '14px', boxShadow: '0 1px 2px rgba(0,0,0,0.1)' }}> |
|
|
<p style={{ color: COLORS.textSecondary, fontSize: '11px', marginBottom: '8px', textTransform: 'uppercase', fontWeight: '600' }}>💡 Dica</p> |
|
|
<p style={{ color: COLORS.textPrimary, fontSize: '14px', margin: 0, lineHeight: '1.5' }}>Se não tiver certeza se eu faço alguma coisa, é só perguntar! Estou aqui pra ajudar 😉</p> |
|
|
</div> |
|
|
</>} |
|
|
|
|
|
</div> |
|
|
<FooterButton text={currentScreenName === 'pronto' ? 'Concluir cadastro' : 'Continuar'} onClick={currentScreenName === 'pronto' ? handleFinish : handleNext} disabled={currentScreenName === 'dados' && !formData.aceitaTermos} /> |
|
|
</div> |
|
|
); |
|
|
}; |
|
|
|
|
|
ReactDOM.createRoot(document.getElementById('root')).render(<OnboardingSimulation />); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
