# 📝 CADASTRO AGGIOS - FLUXO COMPLETO (5 STEPS) --- ## 📋 Índice 1. [Visão Geral](#visão-geral) 2. [Estrutura de Steps](#estrutura-de-steps) 3. [Step 1: Dados Pessoais](#step-1-dados-pessoais) 4. [Step 2: Empresa Básico](#step-2-empresa-básico) 5. [Step 3: Localização e Contato](#step-3-localização-e-contato) 6. [Step 4: Escolher Domínio](#step-4-escolher-domínio) 7. [Step 5: Personalização](#step-5-personalização) 8. [Endpoints](#endpoints) 9. [Validações](#validações) 10. [Fluxo Técnico](#fluxo-técnico) --- ## 🎯 Visão Geral O cadastro de agências na plataforma Aggios é dividido em **5 etapas** bem equilibradas, onde o usuário preenche: 1. Dados pessoais (admin) 2. Dados da empresa (básico) 3. Localização e contato (empresa) 4. Escolhe seu domínio 5. Personaliza o painel **URL**: `dash.aggios.app/cadastro` **Endpoint final**: Redireciona para `{slug}.aggios.app/welcome` **Tempo médio**: 5-10 minutos **Taxa de conversão esperada**: 60%+ --- ## 📐 Estrutura de Steps A barra de progresso mostra visualmente o progresso: ``` ●○○○○ Step 1: Dados Pessoais ○●○○○ Step 2: Empresa Básico ○○●○○ Step 3: Localização e Contato (MESCLADO) ○○○●○ Step 4: Escolher Domínio ○○○○● Step 5: Personalização ``` Cada step tem objetivo claro e validação independente. --- ## 🔐 STEP 1: DADOS PESSOAIS **URL**: `dash.aggios.app/cadastro/step-1` ou `dash.aggios.app/cadastro` **Tempo estimado**: 2-3 minutos **Objetivo**: Capturar dados do admin que vai gerenciar a agência ### O que o user vê ``` ┌────────────────────────────────────────────────┐ │ Criar Agência Aggios │ │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ │ │ │ Etapa 1 de 5: Dados Pessoais │ │ ●○○○○ (barra de progresso) │ │ │ │ Seu Nome Completo: * │ │ [_______________________________] │ │ │ │ Email Pessoal: * │ │ [_______________________________] │ │ (será usado para login) │ │ │ │ Telefone/Celular: * │ │ [_______________________________] │ │ formato: (XX) XXXXX-XXXX │ │ │ │ WhatsApp: (opcional) │ │ ☑ Mesmo número do telefone acima │ │ OU: │ │ [_______________________________] │ │ │ │ Senha: * │ │ [_______________________________] │ │ • Mín 8 caracteres │ │ • 1 letra maiúscula │ │ • 1 número │ │ • 1 caractere especial (!@#$%^&*) │ │ │ │ Confirmar Senha: * │ │ [_______________________________] │ │ │ │ ☑ Concordo com Termos de Uso │ │ ☑ Desejo receber newsletters │ │ │ │ [CANCELAR] [PRÓXIMA ETAPA →] │ │ │ └────────────────────────────────────────────────┘ ``` ### Campos Coletados - Nome Completo (obrigatório) - Email Pessoal (obrigatório, será login) - Telefone/Celular (obrigatório) - WhatsApp (opcional - pode ser igual ao telefone) - Senha (obrigatório, com requisitos de força) - Confirmação de Senha (obrigatório) - Aceitar Termos (obrigatório) - Newsletter (opcional) ### Comportamentos da UI **Validação em Tempo Real:** - Email: valida se já existe (com pequena pausa para não bombardear servidor) - Telefone: auto-formata conforme digita - WhatsApp: auto-formata conforme digita - Força de senha: mostra indicador visual com requisitos **Máscara de Telefone:** - User digita: 9999999999 - Sistema transforma em: (11) 9999-9999 - Transforma automaticamente **WhatsApp:** - Se marca "Mesmo número do telefone" → campo desaparece - Se desmarcar → campo aparece para preenchimento **Botão Próxima Etapa:** - Desabilitado enquanto formulário incompleto - Habilitado quando tudo preenchido - Scroll até primeiro erro se houver problema ### Validações - Nome: mínimo 3 caracteres - Email: formato válido + não pode existir no banco - Telefone: formato (XX) XXXXX-XXXX - WhatsApp: formato (XX) XXXXX-XXXX (opcional) - Senha: 8+ caracteres, 1 maiúscula, 1 número, 1 especial - Confirmação: deve ser igual à senha - Terms: deve estar marcado --- ## 🏢 STEP 2: EMPRESA BÁSICO **URL**: `dash.aggios.app/cadastro/step-2` **Tempo estimado**: 3-4 minutos **Objetivo**: Capturar informações básicas da agência ### O que o user vê ``` ┌────────────────────────────────────────────────┐ │ Criar Agência Aggios │ │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ │ │ │ Etapa 2 de 5: Empresa Básico │ │ ○●○○○ (barra de progresso) │ │ │ │ Nome da Agência: * │ │ [_______________________________] │ │ (ex: IdeaPages, DevStudio, etc) │ │ │ │ CNPJ da Empresa: * │ │ [__.__.__/__-__] │ │ (ex: 12.345.678/0001-90) │ │ ℹ️ Será usado para emissão de recibos │ │ │ │ Descrição (breve): * │ │ [_______________________________] │ │ [_______________________________] │ │ [_______________________________] │ │ (máx 300 caracteres) │ │ │ │ Website/Portfolio (opcional): │ │ [_______________________________] │ │ (ex: https://idealpages.com.br) │ │ │ │ Segmento/Indústria: * │ │ [Agência Digital ▼] │ │ │ │ Tamanho da Equipe: │ │ [1-10 pessoas ▼] │ │ │ │ [← ANTERIOR] [PRÓXIMA ETAPA →] │ │ │ └────────────────────────────────────────────────┘ ``` ### Campos Coletados - Nome da Agência (obrigatório, 3-100 caracteres) - CNPJ (obrigatório, 14 dígitos com validação) - Descrição Breve (obrigatório, 10-300 caracteres) - Website/Portfolio (opcional) - Segmento/Indústria (obrigatório, dropdown) - Tamanho da Equipe (obrigatório, dropdown) ### Comportamentos da UI **CNPJ:** - Auto-formata: 12345678000190 → 12.345.678/0001-90 - Valida dígitos verificadores (algoritmo CNPJ) - Mostra status visual: ✓ válido, ✗ inválido/duplicado - Se duplicado: "Este CNPJ já está registrado" **Descrição:** - Contador de caracteres em tempo real: 47/300 - Quando atinge máximo: não permite mais digitação - Mostra em cores: verde (ok), amarelo (perto do máximo) **Dropdown com Busca:** - Segmento: pode filtrar por busca - Tamanho: opções fixas (1-10, 11-50, 51-100, 100+) **Botão Anterior:** - Sempre disponível - Volta para Step 1 com dados preenchidos ### Validações - Nome empresa: 3-100 caracteres, sem caracteres especiais - CNPJ: 14 dígitos + dígitos verificadores válidos + não duplicado - Descrição: 10-300 caracteres - Website: URL válida (opcional) - Indústria: obrigatório selecionar - Tamanho: obrigatório selecionar ### Opções de Indústrias - Agência Digital - Agência Full-Stack - Consultoria - SaaS - E-commerce - Software House - Outra --- ## 📍 STEP 3: LOCALIZAÇÃO E CONTATO **URL**: `dash.aggios.app/cadastro/step-3` **Tempo estimado**: 3-4 minutos **Objetivo**: Capturar dados de localização e contato comercial (MESCLADO em uma tela) **Motivo da Mesclagem**: Dois grupos relacionados (endereço físico + contato), economiza step sem prejudicar UX ### O que o user vê ``` ┌────────────────────────────────────────────────┐ │ Criar Agência Aggios │ │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ │ │ │ Etapa 3 de 5: Localização e Contato │ │ ○○●○○ (barra de progresso) │ │ │ │ ── LOCALIZAÇÃO ── │ │ │ │ CEP: * │ │ [_____-___] [BUSCAR CEP] │ │ (ex: 01310-100) │ │ │ │ Estado: * │ │ [São Paulo ▼] │ │ │ │ Cidade: * │ │ [São Paulo ▼] │ │ (dropdown com busca) │ │ │ │ Bairro: * │ │ [_______________________________] │ │ │ │ Rua/Avenida: * │ │ [_______________________________] │ │ │ │ Número: * │ │ [___________] │ │ │ │ Complemento: (opcional) │ │ [_______________________________] │ │ (ex: Apt 1234, Sala 500) │ │ │ │ ── CONTATO DA EMPRESA ── │ │ │ │ Email Comercial: * │ │ [_______________________________] │ │ (ex: contato@idealpages.com.br) │ │ │ │ Telefone da Empresa: * │ │ [_______________________________] │ │ (ex: (11) 3333-4444) │ │ │ │ WhatsApp Empresarial: (opcional) │ │ ☑ Mesmo número do telefone acima │ │ OU: │ │ [_______________________________] │ │ │ │ [← ANTERIOR] [PRÓXIMA ETAPA →] │ │ │ └────────────────────────────────────────────────┘ ``` ### Campos Coletados - Localização - CEP (obrigatório, 8 dígitos, busca com ViaCEP) - Estado/UF (obrigatório, dropdown com 27 opções) - Cidade (obrigatório, dropdown com busca) - Bairro (obrigatório, mínimo 3 caracteres) - Rua/Avenida (obrigatório, mínimo 3 caracteres) - Número (obrigatório, 1-5 dígitos) - Complemento (opcional, máximo 100 caracteres) ### Campos Coletados - Contato - Email Comercial (obrigatório) - Telefone da Empresa (obrigatório) - WhatsApp Empresarial (opcional, pode ser igual ao telefone) ### Comportamentos da UI **CEP - Busca com ViaCEP:** Quando user digita um CEP válido: 1. Sistema aguarda 1-2 segundos (debounce) 2. Faz requisição para ViaCEP 3. Se encontrado: auto-preenche Estado, Cidade, Bairro, Rua 4. User completa Número e Complemento 5. Se não encontrado: campos ficam em branco para preenchimento manual **Feedback Visual do CEP:** - ⏳ Amarelo enquanto busca - ✓ Verde quando encontrado - ✗ Vermelho quando não encontrado **Dropdown de Cidades:** - Ao clicar em "Cidade" - Abre dropdown com opções do Estado selecionado - Pode digitar para filtrar (ex: digita "cam" → mostra "Campinas") - Seleciona e fecha **Máscara de CEP:** - User digita: 01310100 - Sistema transforma em: 01310-100 - Auto-formata conforme digita **WhatsApp - Checkbox:** - Se marca "Mesmo número do telefone" → campo WhatsApp desaparece - Se desmarcar → campo WhatsApp aparece **Seções Visuais:** - "LOCALIZAÇÃO" em destaque (para separar dos contatos) - "CONTATO DA EMPRESA" em destaque (segunda seção) - Divisão visual clara entre as duas seções ### Validações **Localização:** - CEP: 8 dígitos válidos - CEP: encontrado em ViaCEP OU preenchido manualmente com dados corretos - Estado: selecionado de lista (27 UFs) - Cidade: selecionada de lista - Bairro: 3+ caracteres - Rua: 3+ caracteres - Número: 1-5 dígitos numéricos **Contato:** - Email: formato válido - Telefone: formato válido (XX) XXXX-XXXX - WhatsApp: formato válido (XX) XXXXX-XXXX (opcional) --- ## 🌐 STEP 4: ESCOLHER DOMÍNIO **URL**: `dash.aggios.app/cadastro/step-4` **Tempo estimado**: 1-2 minutos **Objetivo**: User escolhe o slug (domínio) para seu painel **Importância**: Decisão importante, mostra sugestões automáticas ### O que o user vê ``` ┌────────────────────────────────────────────────┐ │ Criar Agência Aggios │ │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ │ │ │ Etapa 4 de 5: Escolha seu Domínio │ │ ○○○●○ (barra de progresso) │ │ │ │ Seu painel estará em: │ │ https://[_____________].aggios.app │ │ │ │ Dicas: │ │ • Use nome da sua agência (sem espaços) │ │ • Apenas letras, números e hífen │ │ • Mínimo 3 caracteres │ │ │ │ ┌──────────────────────────────────────────┐ │ │ │ idealpages ✓ │ │ │ │ (verde + checkmark = disponível) │ │ │ └──────────────────────────────────────────┘ │ │ │ │ 🔗 https://idealpages.aggios.app │ │ │ │ [USAR ESTE] │ │ │ │ ── OU ESCOLHA OUTRO ── │ │ │ │ Prefere outro? │ │ [_______________________________] │ │ │ │ [VERIFICAR DISPONIBILIDADE] │ │ │ │ ┌──────────────────────────────────────────┐ │ │ │ idealpages-studio ✓ │ │ │ │ (disponível - verde) │ │ │ └──────────────────────────────────────────┘ │ │ │ │ 🔗 https://idealpages-studio.aggios.app │ │ │ │ [USAR ESTE] │ │ │ │ ┌──────────────────────────────────────────┐ │ │ │ idealpages-admin ✗ │ │ │ │ ❌ Domínio reservado (não disponível) │ │ │ └──────────────────────────────────────────┘ │ │ │ │ [← ANTERIOR] [PRÓXIMA ETAPA →] │ │ │ └────────────────────────────────────────────────┘ ``` ### Campos Coletados - Slug/Domínio (obrigatório, única decisão neste step) ### Comportamentos da UI **Sugestão Automática:** - Ao chegar na página, sistema pega nome da empresa - Transforma em slug válido (exemplo: "IdeaPages" → "idealpages") - Já mostra pronto com ✓ se disponível - User pode usar sugestão ou escolher outro **Validação em Tempo Real:** - User digita em "Prefere outro?" - Sistema aguarda 1-2 segundos (debounce) - Verifica se slug é válido e disponível - Mostra resultado visual: ✓ (verde), ✗ (vermelho), ⏳ (amarelo verificando) **Auto-Formatação:** - "IdeaPages" → "idealpages" (lowercase automático) - "Ideal Pages" → "ideal-pages" (espaço vira hífen) - "Ideal___Pages" → "ideal-pages" (múltiplos hífens viram um) - Remove caracteres inválidos automaticamente **Botão "Usar Este":** - Só fica ativado para slugs com ✓ - Desativado para slugs com ✗ - Ao clicar: salva escolha, permite ir para próximo step ### Validações - Comprimento: 3-50 caracteres - Formato: apenas a-z, 0-9, hífen (-) - Estrutura: não começa/termina com hífen - Reservados: não é palavra reservada do sistema - Unicidade: não existe no banco ### Palavras Reservadas (Não Permitidas) admin, api, dash, app, www, mail, blog, shop, store, support, help, docs, status, aggios, login, register, signup, oauth, webhook --- ## 🎨 STEP 5: PERSONALIZAÇÃO **URL**: `dash.aggios.app/cadastro/step-5` **Tempo estimado**: 2-3 minutos **Objetivo**: Personalizar visual do painel (logo, cores, configurações) **Final da jornada**: Último step antes da criação ### O que o user vê ``` ┌────────────────────────────────────────────────┐ │ Criar Agência Aggios │ │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ │ │ │ Etapa 5 de 5: Personalização do Painel │ │ ○○○○● (barra de progresso) │ │ │ │ ── LOGO E IDENTIDADE ── │ │ │ │ Logotipo: (opcional) │ │ ┌──────────────────────────────────────────┐ │ │ │ [📁 SELECIONAR ARQUIVO] │ │ │ │ Ou arraste um arquivo aqui │ │ │ │ │ │ │ │ Formatos: JPG, PNG, SVG │ │ │ │ Tamanho máximo: 5MB │ │ │ │ Recomendado: 1024x1024px │ │ │ │ │ │ │ │ ℹ️ Será exibido no topo do seu painel │ │ │ └──────────────────────────────────────────┘ │ │ │ │ ── CORES DO PAINEL ── │ │ │ │ Cor Primária: * │ │ ┌────────────────────────────────────────┐ │ │ │ [███] #3B82F6 (Azul padrão) │ │ │ │ [ESCOLHER COR] │ │ │ └────────────────────────────────────────┘ │ │ │ │ Cor Secundária: (opcional) │ │ ┌────────────────────────────────────────┐ │ │ │ [███] #10B981 (Verde padrão) │ │ │ │ [ESCOLHER COR] │ │ │ └────────────────────────────────────────┘ │ │ │ │ ── PREVIEW EM TEMPO REAL ── │ │ ┌──────────────────────────────────────────┐ │ │ │ ┌────────────────────────────────────┐ │ │ │ │ │ IdeaPages │ │ │ │ │ │ (com logo se tiver) │ │ │ │ │ └────────────────────────────────────┘ │ │ │ │ │ │ │ │ ████████████████████████████████████ │ │ ← cor primária │ │ │ │ │ │ ┌────────────────────────────────────┐ │ │ │ │ │ 📊 Dashboard │ │ │ │ │ │ Bem-vindo ao seu painel! │ │ │ │ │ │ │ │ │ │ │ │ [Botão com cor primária] │ │ │ │ │ │ [Botão com cor secundária] │ │ │ │ │ └────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────┘ │ │ │ │ ── CONFIGURAÇÕES ── │ │ │ │ ☑ Permitir que clientes façam upload │ │ de arquivos nos projetos │ │ │ │ ☑ Ativar portal de cliente automaticamente │ │ para novos projetos │ │ │ │ [← ANTERIOR] [FINALIZAR E CRIAR AGÊNCIA] │ │ │ └────────────────────────────────────────────────┘ ``` ### Campos Coletados - Logo (opcional, arquivo JPG/PNG/SVG, máx 5MB) - Cor Primária (obrigatório, hex color) - Cor Secundária (opcional, hex color) - Permitir Upload de Clientes (checkbox, padrão: true) - Ativar Portal de Cliente (checkbox, padrão: true) ### Comportamentos da UI **Upload de Logo:** - Área drag & drop: user pode arrastar arquivo diretamente - Clique para selecionar: abre file picker - Progresso visual: barra de upload enquanto sobe arquivo - Preview: mostra imagem após upload - Opção de remover: botão X para descartar **Color Picker:** - Clica em "ESCOLHER COR" → abre modal - Modal oferece: - Paleta de cores predefinidas (rápido) - Picker customizado com gradiente - Slider de brilho (claro/escuro) - Input direto de hex (#RRGGBB) - Confirmar/Cancelar na modal - Preview em tempo real no painel **Preview em Tempo Real:** - Ao escolher cores: preview atualiza instantaneamente - Ao fazer upload de logo: aparece no preview - Mostra como ficará o painel da agência - Lado a lado com os controles **Checkboxes (Configurações):** - "Permitir upload de clientes": já vem marcado por padrão - "Portal cliente automático": já vem marcado por padrão - User pode desmarcar se quiser (não recomendado) **Botão Final:** - "FINALIZAR E CRIAR AGÊNCIA": botão destaque - Desabilitado se Cor Primária não estiver preenchida - Ao clicar: começa processo de criação ### Validações - Logo: JPG, PNG, SVG (opcional), máximo 5MB - Cor Primária: formato hex válido (#RRGGBB) - Cor Secundária: formato hex válido (opcional) --- ## 🔌 ENDPOINTS ### Autenticação e Cadastro **POST /auth/signup/step-1** - Recebe dados pessoais - Valida email + telefone + senha - Cria entrada temporária (signup_temp) - Retorna tempUserId para próximos steps **POST /auth/signup/step-2** - Recebe dados da empresa - Valida CNPJ + nomes + indústria - Atualiza signup_temp - Retorna success **POST /auth/signup/step-3** - Recebe localização e contato - Valida CEP + endereço + emails/telefones - Atualiza signup_temp - Retorna success **POST /auth/signup/step-4** - Recebe slug do domínio - Valida disponibilidade + formato - Atualiza signup_temp - Retorna success **POST /auth/signup/step-5** - Recebe personalização (logo, cores, configs) - Valida tudo - Executa TRANSAÇÃO: - Cria tenant - Cria user admin - Deleta signup_temp - Gera JWT - Retorna token + tenant + redirectUrl ### Validações Auxiliares **GET /auth/check-slug?slug=idealpages** - Verifica se slug está disponível - Retorna: available (true/false) - Usado em tempo real na Step 4 **GET /api/cep/:cep** - Busca CEP em ViaCEP - Retorna: estado, cidade, bairro, rua - Integração: ViaCEP API (gratuita) - Cache: 24 horas em Redis **POST /upload/logo** - Faz upload de logo para Minio (S3-compatible) - Retorna URL da imagem - Validações: tamanho, formato --- ## ✅ VALIDAÇÕES ### STEP 1 - Dados Pessoais **Nome Completo:** - Mínimo 3 caracteres - Sem números no meio - Máximo 100 caracteres **Email:** - Formato válido (RFC 5322) - Não pode existir no banco - Verificação com debounce (1-2 segundos) **Telefone:** - Formato: (XX) XXXXX-XXXX - 10-11 dígitos totais - Números válidos (começa de 0-9) **WhatsApp:** - Formato: (XX) XXXXX-XXXX (opcional) - Se preenchido: deve ser válido - Pode ser igual ao telefone **Senha:** - Mínimo 8 caracteres - 1 letra maiúscula (A-Z) - 1 número (0-9) - 1 caractere especial (!@#$%^&*) - Máximo 128 caracteres **Confirmação Senha:** - Deve ser exatamente igual à senha **Terms:** - Deve estar marcado para prosseguir --- ### STEP 2 - Empresa Básico **Nome Empresa:** - 3-100 caracteres - Sem caracteres especiais - Sem números apenas **CNPJ:** - Exatamente 14 dígitos (sem formatação) - Dígitos verificadores válidos (algoritmo CNPJ) - Não pode estar duplicado no banco - Deve estar ativo na Receita Federal **Descrição:** - Mínimo 10 caracteres - Máximo 300 caracteres - Deve descrever a agência **Website:** - URL válida (opcional) - Deve começar com https:// ou http:// - Domínio válido **Indústria:** - Obrigatório selecionar de lista predefinida **Tamanho Equipe:** - Obrigatório selecionar de opções: 1-10, 11-50, 51-100, 100+ --- ### STEP 3 - Localização e Contato **CEP:** - Exatamente 8 dígitos (sem formatação) - Deve estar cadastrado em ViaCEP - Se não encontrado: aceita preenchimento manual **Estado (UF):** - Obrigatório selecionar de 27 UFs - Dois caracteres (SP, MG, RJ, etc) **Cidade:** - Obrigatório selecionar de lista (por UF) - Válida para o estado escolhido **Bairro:** - Mínimo 3 caracteres - Máximo 100 caracteres - Sem números exclusivamente **Rua/Avenida:** - Mínimo 3 caracteres - Máximo 200 caracteres - Pode conter números **Número:** - 1-5 dígitos numéricos - Obrigatório **Complemento:** - Máximo 100 caracteres (opcional) - Exemplos: Apt 1234, Sala 500, Loja 2 **Email Comercial:** - Formato válido - Obrigatório - Diferente do email pessoal (em regra, mas não obrigatório) **Telefone Empresa:** - Formato: (XX) XXXX-XXXX ou (XX) XXXXX-XXXX - 10-11 dígitos - Obrigatório **WhatsApp Empresa:** - Formato: (XX) XXXXX-XXXX (opcional) - Se preenchido: deve ser válido - Pode ser igual ao telefone --- ### STEP 4 - Domínio **Slug:** - Comprimento: 3-50 caracteres - Caracteres permitidos: a-z, 0-9, hífen (-) - Não pode começar com hífen - Não pode terminar com hífen - Não pode ser palavra reservada - Não pode estar duplicado no banco --- ### STEP 5 - Personalização **Logo:** - Formatos aceitos: JPG, PNG, SVG (opcional) - Tamanho máximo: 5MB - Resolução recomendada: 1024x1024px **Cor Primária:** - Formato hex válido (#RRGGBB) - Obrigatório **Cor Secundária:** - Formato hex válido (opcional) - Padrão: #10B981 (verde) **Checkboxes:** - Valores: true/false - Nenhuma validação especial --- ## 🔄 FLUXO TÉCNICO ### Fluxo Geral User acessa `dash.aggios.app/cadastro` ↓ Sistema verifica JWT (não logado) ↓ Redireciona para `/cadastro/step-1` ↓ User preenche Step 1 (Dados Pessoais) ↓ Frontend valida ↓ POST /auth/signup/step-1 ↓ Backend valida ↓ INSERT signup_temp ↓ Armazena tempUserId em localStorage ↓ Redireciona /cadastro/step-2 ### Fluxo Completo ``` Step 1 → Valida + POST → INSERT signup_temp ↓ Step 2 → Valida + POST → UPDATE signup_temp ↓ Step 3 → Valida + ViaCEP + POST → UPDATE signup_temp ↓ Step 4 → Valida + Check slug + POST → UPDATE signup_temp ↓ Step 5 → Valida + Upload logo + POST → TRANSAÇÃO ↓ TRANSAÇÃO (Backend): ├─ Valida tempUserId ├─ Valida todos dados ├─ CREATE tenant ├─ CREATE user (admin) ├─ DELETE signup_temp ├─ Gera JWT └─ COMMIT ↓ Response: success + token + tenant + redirectUrl ↓ Frontend: ├─ Armazena JWT ├─ Armazena tenantSlug ├─ Redireciona para: {slug}.aggios.app/welcome ``` ### Tratamento de Erros **Se validação frontend falhar:** - Mostra erros inline abaixo de cada campo - Destaca campos com erro (vermelho) - Scroll automático até primeiro erro - User corrige e tenta novamente **Se backend retornar erro:** - Toast com mensagem de erro (em vermelho) - User permanece na mesma página - Formulário mantém valores preenchidos - User pode corrigir e tentar novamente **Se sessão expirar:** - signup_temp é deletado após 24 horas - Redireciona pra login - User perde progresso - Pode começar do zero **Se houver problema na transação final:** - Rollback automático (desfaz tudo) - Retorna erro específico - User fica em Step 5 - Pode tentar novamente --- ## 📊 Estatísticas Esperadas **Tempo médio de conclusão**: 5-10 minutos **Taxa de conclusão esperada**: 60%+ **Pontos de drop-off provável**: - Step 1 (não quer criar conta): ~15% - Step 2 (CNPJ problemático): ~10% - Step 3 (endereço): ~5% - Step 4 (domínio indecisão): ~5% - Step 5 (logo/cores): ~5% --- ## 🎯 Resumo Final ``` ✅ CADASTRO FINAL: 5 STEPS Step 1: Dados Pessoais (5 campos) - Nome, email, telefone, whatsapp, senha - 2-3 minutos - Taxa drop: ~15% Step 2: Empresa Básico (6 campos) - Nome, CNPJ, descrição, website, indústria, tamanho - 3-4 minutos - Taxa drop: ~10% Step 3: Localização e Contato (10 campos) ← MESCLADO - CEP, estado, cidade, bairro, rua, número, complemento - Email, telefone, whatsapp - 3-4 minutos - Taxa drop: ~10% Step 4: Domínio (1 campo) - Escolher slug - 1-2 minutos - Taxa drop: ~5% Step 5: Personalização (3 campos) - Logo, cores primária/secundária, checkboxes - 2-3 minutos - Taxa drop: ~5% TOTAL: 25 campos distribuídos equilibradamente BENEFÍCIOS: ✅ 5 steps (não assusta usuário) ✅ Distribuição lógica (cada step tem objetivo) ✅ Step 3 mesclado (10 campos, bem organizado com seções) ✅ Validação granular (erro em um step não afeta outro) ✅ Melhor taxa de conversão (menos drop-off) ✅ Progress visual (user sabe onde está) ✅ Fácil retomar se desistir (dados salvos em DB) ``` --- **Versão**: 1.0 **Data**: 04/12/2025 **Status**: Pronto para desenvolvimento **Detalhamento**: Lógica e UX (sem código técnico)