Realizado

Frontend em React para criar um Form Wizard

Publicado em 18 de Junho de 2018 dias na TI e Programação

Sobre este projeto

Aberto

Profissional que domine React para fazer um formulário de passo-a-passo (5 passos).
O formulário precisa ter validação de campos para passar de uma etapa para a outra, precisa ter upload de imagem (foto).

Passo 1 - Identificação:
Campos: Nome completo, Email (que deverá fazer uma requisição e verificar disponibilidade), senha e tipo de estabelecimento (checkbox)

Passo 2 - Estabelecimento:
Campos: Nome do estabelecimento, slogan, telefone, logo (upload), foto de capa (upload), Cep (que deverá consultar uma api de cep e completar o endereço), logradouro, numero, complemento, bairro, cidade, estado;

Se no primeiro passo, for escolhido a opção do tipo de estabelecimento clinica, devera ser exibido as informações de horário de atendimento, onde terá: select de Tempo médio de atendimento (1h, 30min, etc), clientes por horário, e uma grid com os horários de todos os dias, onde será possível remover um horário ou adicionar um novo, por padrão essa tela é montada com consultas de 30min, e de segunda a sexta com os horários de 9h as 12h (ou seja, 9:00, 9:30, 10:00, 10:30, etc) e de 13:00 as 18:00. Uma coisa importante é que se mudar as informações de tempo médio de atendimento, a grid de horários deve ser redesenhada contemplado a nova condição;


Passo 3 - Plano:
Nesse passo terá uma tabela com a listagem de benefícios de dois planos (Grátis e Premium) com dois radio buttons ou botões para o usuário escolher qual plano se adequa a ele.

Após escolher o plano, o usuário deve inserir seus dados de pagamento (cartão de crédito).


Passo 4 - Serviço:
Nessa tela será exibido categorias e serviços, que o usuário deve primeiro escolher.
Em primeiro lugar ele deve escolher algumas categorias principais (Categoria A, Categoria B, etc), após escolher as categorias principais,
Será exibido um campo de busca (que será um suggest com requisição a api) e uma listagem de items baseados na categoria escolhida com um campo de Valor ao lado de cada item.

Se o usuário escolheu o plano grátis no Passo 3, ele pode escolher e adicionar apenas 1 item.


Passo 5 - Resumo;
Nessa tela mostrará apenas o resumo das informações preenchidas e terá um botão de concluir, ao concluir todas as informações será enviada a api que retornará um sucesso ou uma falha, em caso de falha uma mensagem deve ser retornada e deverá dar a possibilidade do usuário voltar ao campo e consertar o erro.

Categoria TI e Programação
Subcategoria Programação
Qual é o alcance do projeto? Alteração média
Isso é um projeto ou uma posição de trabalho? Um projeto
Tenho, atualmente Eu tenho o design
Disponibilidade requerida Conforme necessário
Experiência nesse tipo de projeto Sim (Eu já gerenciei esse tipo de projeto)
Funções necessárias Designer, Desenvolvedor, Fazer o design de uma landing page

Prazo de Entrega: 24 de Junho de 2018

Habilidades necessárias