Preencimento de dados Pessoais - FRONT-END [3]

[eemr3]

Descrição
O usuário acessa a primeira tela do Survey Inicial para fornecer suas informações pessoais, permitindo que a plataforma personalize sua experiência com base em seu perfil demográfico.

Protótipos
Figma

Critérios de Aceite

1. A tela deve exibir uma interface limpa e intuitiva, contendo campos de entrada claramente rotulados que coletam informações específicas do usuário. Estes devem incluir: Nome Completo, Gênero, Data de Nascimento e Localização (País, Estado e Cidade). Cada rótulo de campo deve estar diretamente acima do respectivo campo de entrada para uma associação clara.

2. No topo do formulário, uma barra de progresso visível deve ser exibida para indicar a etapa atual do preenchimento do formulário (1 de 5). A barra de progresso deve ser atualizada dinamicamente conforme o usuário avança através do survey.

3. O campo Nome Completo deve ser um campo de texto livre, aceitando apenas caracteres alfabéticos e espaços. Deve-se limitar a entrada a um máximo de 70 caracteres para evitar erros de sobrecarga de dados.

4. O campo Gênero deve ser um menu suspenso, permitindo ao usuário escolher entre as seguintes opções pré-definidas: Masculino, Feminino, Outro e Prefiro não informar. Deve ser garantido que somente uma opção possa ser selecionada.

5. O campo Data de Nascimento deve ser um seletor de data, com uma restrição que impede o usuário de selecionar uma data que o faria ter menos de 16 anos. Isso deve ser validado tanto no front-end quanto no back-end para garantir a segurança dos dados.

6. Os campos País, Estado e Cidade devem ser implementados como menus suspensos interconectados, preenchidos automaticamente por meio de uma API de localização. Quando o usuário seleciona um país, o campo Estado deve ser preenchido automaticamente com os estados relevantes, e o mesmo se aplica ao campo Cidade quando um Estado é selecionado.

7. Antes que o usuário possa prosseguir para a próxima tela do survey, todos os campos devem ser preenchidos corretamente. Isso deve ser verificado por meio de validação em tempo real, mostrando feedback instantâneo caso algum campo seja deixado vazio ou preenchido de forma inválida.

8. Se um usuário tentar avançar no survey com algum campo vazio ou inválido, mensagens de erro claras e facilmente visíveis devem ser exibidas ao lado do campo relevante. Essas mensagens de erro devem especificar o problema e fornecer orientação sobre como corrigi-lo.

9. Na parte inferior da tela, deve haver um botão claramente visível e acessível, rotulado como "Continuar". Este botão deve ser desativado (diminuindo a opacidade e impedindo cliques) até que todos os campos sejam preenchidos corretamente, momento em que o botão deve ser ativado, permitindo que o usuário prossiga para a próxima etapa do survey.

10. Caso o usuário queira sair e salvar o que já preencheu, deverá haver um botão "salvar e sair" para que o usuário possa retornar de onde parou assim que logar novamente na plataforma.

Informações Adicionais

• FrontEnd: entrar nos cards e combinar com o pessoal de BackEnd como vão ser modelados os dados

• A interface da primeira tela do survey deve seguir o estilo visual consistente com a marca Findy (cores, fontes e layout).

• As mensagens de erro devem ser apresentadas em vermelho próximo ao campo inválido para facilitar a identificação do problema pelo usuário.

• O botão "Próximo" deve ficar desativado até que todos os campos obrigatórios sejam preenchidos corretamente.

[FabioSanMartin]

Realizados os testes da primeira tela da survey.

Resultados:

TODOS OS CRITÉRIOS DE ACEITE PASSARAM. A OPACIDADE DOS BOTÕES "VOLTAR" E "CONTINUAR" DEVE SER VERIFICADA PELA EQUIPE DE DEVs.

CENARIOS DE TESTE FINDY - 002.pdf

[vanlacerenza]

@Guidevit quanto a localização faz sentido que seja implementada em um segundo momento, mas o campo de localização está muito genérico. Ao meu ver, deve-se separar: Cidade / Estado / País pelo menos, e um campo CEP.

[Guidevit]

@vanlacerenza temos um card ali em testes #44. Iremos integrar uma API do google para identificar automaticamente a localização.