Completed

Frontend em React para criar um Form Wizard

Published on the June 18, 2018 in IT & Programming

About this project

Open

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.

Category IT & Programming
Subcategory Web development
What is the scope of the project? Medium-sized change
Is this a project or a position? Project
I currently have I have the design
Required availability As needed
Experience in this type of projects Yes (I have managed this kind of project before)
Roles needed Designer, Developer, Design a landing page

Delivery term: June 24, 2018

Skills needed