
# Desafio - Unidade 4
Links rápidos:
- [Figma do projeto](https://www.figma.com/file/92WTfz5HeKAGvEc5cZUGN1/Desafio-Cubos-Academy)
- Back-end de referência: https://cubos-desafio-4.herokuapp.com/
## Introdução
Chegando ao fim do curso, você foi contratado(a) para trabalhar numa StartUp que terceiriza um sistema de cobranças. Ou seja, os usuários de vocês, após se cadastrarem na plataforma, podem cadastrar os clientes deles e criar uma cobrança para que os clientes paguem. Os clientes recebem um email com o link do boleto para pagar.
Além disso, nesta plataforma os usuários podem ver e buscar clientes, ver e buscar cobranças, marcar uma cobrança como paga, ver um resumo de todo o financeiro, dentre outras coisas que estarão mais detalhadas abaixo.
Você precisa desenvolver o MVP do projeto, que consiste em uma plataforma online na qual seus usuários podem usufruir das seguintes funcionalidades:
## Login e Cadastro
Seus usuários poderão:
- Se cadastrar, inserindo:
- Nome
- Email
- Senha
- Logar, inserindo:
- Email
- Senha
- Logout
- **[EXTRA]** Recuperar a senha caso esqueçam
Lembre-se sempre de exibir erros adequados caso não haja sucesso em qualquer momento. Use a criatividade.
## Clientes
Uma vez logados, seus usuários poderão:
- Cadastrar os clientes deles, inserindo:
- Nome
- Email
- CPF
- Celular
- **[EXTRA]** Endereço (CEP, rua, numero, complemento, cidade e estado)
- Ver a lista de clientes
- Naturalmente, cada usuário só pode ver os seus clientes
- O usuário vê apenas 10 clientes por vez, com uma paginação
- O usuário pode buscar clientes. O cliente deve ser encontrado caso o texto buscado seja parte do nome, email ou cpf do cliente.
- A cor do ícone do cliente indica se ele está inadimplente ou não. Um cliente inadimplente é aquele que tem cobranças vencidas.
- O cliente não pode ser excluído (seria uma funcionalidade um pouco mais complexa)
- Editar um cliente
- Pode editar qualquer dado do cliente (menos o id!)
### Cobranças
Após ter criado clientes, o usuário pode criar cobranças para que estes clientes paguem. Após criar a cobrança, o cliente receberá um email com o boleto para pagar.
- Criar cobranças para um cliente:
- Selecionando o cliente
- **[EXTRA]** Selecionar o cliente usando um autocomplete ao invés de um select com dropdown tradicional.
- Inserindo o valor da cobrança
- Inserir uma descrição para a cobrança
- Selecionando a data de vencimento do boleto
- Após a cobrança ter sido criada com sucesso, o cliente recebrá um email com o boleto para pagar
- **[EXTRÃO]** Selecionar a forma de pagamento entre boleto ou cartão
- Para fazer esse extra, é importante ter feito o extra de dados de endereço do cliente, pois isso será necessário para fazer a cobrança do cartão na pagar.me.
- Caso a opcao selecionada seja cartão, o cliente receberá um email com um link para uma nova página que você vai criar, onde ele pode inserir os dados do cartão e realizar o pagamento. Use a criatividade.
- Ver a lista de cobranças
- Ver 10 cobranças por vez, com paginação
- Buscar cobranças. A cobrança deve ser encontrada pela busca caso o texto buscado seja parte do nome do cliente, cpf ou email do mesmo.
- Em cada cobrança deve constar:
- Dados do cliente (nome, email, cpf e cel)
- Valor da cobrança
- Data de vencimento
- Status, que pode ser: `PAGO`, `VENCIDO` ou `AGUARDANDO`
- `PAGO`: Boleto que foi gerado e depois marcado como pago antes do vencimento
- `VENCIDO`: Boleto cuja data de vencimento é anterior a data atual e ainda não foi dado como pago
- `AGUARDANDO`: Boleto que ainda não foi dado como pago e a data de vencimento é igual ou posterior a data atual.
- Marcar boleto como pago: o usuário está indicando que o cliente pagou o boleto, portanto seu status deve ser alterado para PAGO. A startup decidiu fazer assim por ser um MVP, mas já sabe que implementará um POSTBACK no futuro, para que essa funcionalidade seja automatizada.
- **[EXTRA]** Ao clicar em marcar o boleto como pago, abrir um popup BONITO de confirmação.
### Relatório
Na home, seus usuários poderão ter um resumo da atividade de cobranças como um todo. Poderão der acesso as seguintes informações consolidadas:
- Número de clientes adimplentes
- São aqueles que não possuem nenhuma cobrança vencida não paga
- Número de clientes inadimplentes
- São aqueles que possuem alguma cobrança vencida não paga
- Número de cobranças pagas
- Número de cobranças vencidas
- Número de cobranças aguardando pagamento (previstas)
- Saldo em conta
- O saldo em conta é o total de cobranças pagas pelos clientes.
- **[EXTRA]** Gráfico de pagamentos por dia
### Responsividade
Todo o projeto deve ser responsivo, ou seja, ter uma versão interessante para ser acessada pelo celular.
## Próximos passos
Caso termine o trabalho, fique a vontade para crescer a solução acrescentando funcionalidades que acredite que façam sentido. Seguem algumas sugestões além do extra:
- Integrar com alguma ferramenta de chat para atendimento (é mais fácil do que parece). Ex: JivoChat.
- Funcionalidade de saque, na qual o usuario pode solicitar um saque, inserindo dados bancários e o valor que deseja sacar. Nessa fase da startup, a transferencia financeira em si seria feita manualmente para o cliente.
- Modalidade de assinatura, na qual cobranças seriam criadas automaticamente, com uma frequencia pré determinada pelo usuário e enviadas para o email do cliente. Naturalmente, o usuário pode acompanhar uma listagem das cobranças de assinatura que estao sendo geradas e pagas (ou não).
- Detecção automática de pagamento de boletos: a pagar.me oferece a possibilidade de que seja cadastrado um endpoint ao gerar um boleto para que eles avisem neste endpoint que o boleto foi pago. Isso é chamado de POSTBACK. Seria uma feature interessantíssima para a startup, não é mesmo?
# Back-end
Para a correção do desafio de back-end, vamos ter alguns testes automatizados, portanto a API deve seguir rigorosamente as seguintes especificações:
- Rodar na porta 8081
Ter os seguintes endpoints:
## Login
**URL:** `/auth`
**Método:** POST
**Entrada:**
```json=
{
"email": "exemplo@email.com",
"senha": "minhasenha"
}
```
**Saída de sucesso:**
```javascript=
{
status: 200,
dados: {
mensagem: "Usuário logado com sucesso!",
token: "token_gerado_aqui"
}
}
```
## Criar usuário
**URL:** `/usuarios`
**Método:** POST
**Entrada:**
```javascript=
{
email: "exemplo@email.com",
senha: "minhasenha",
nome: "Nome do Usuario"
}
```
**Saída de sucesso:**
```javascript=
{
status: 201,
dados: {
id: "id_do_usuario_criado"
}
}
```
## Criar cliente
**URL:** `/clientes`
**Método:** POST
**Token exigido:** Sim
**Entrada:**
```json=
{
"nome": "Nome do Cliente",
"cpf": "000.000.000-21,
"email": "exemplo@email.com",
"tel": "+5571999996688"
}
```
**Saída de sucesso:**
```javascript=
{
status: 201,
dados: {
id: "id_do_cliente_criado"
}
}
```
## Editar cliente
**URL:** `/clientes`
**Método:** PUT
**Token exigido:** Sim
**Entrada:**
```javascript=
{
id: "id_do_cliente",
nome: "Nome do Usuario",
cpf: "000.000.000-21"
email: "exemplo@email.com",
}
```
**Saída de sucesso:**
```javascript=
{
status: 200,
dados: {
id: "id_do_cliente_editado",
nome: "Nome do Usuario",
cpf: "000.000.000-21"
email: "exemplo@email.com",
}
}
```
## Listar clientes
**URL:** `/clientes?clientesPorPagina=10&offset=20`
**Método:** GET
**Token exigido:** Sim
**Entrada:**
```javascript=
`?clientesPorPagina=10&offset=20` é a forma de filtrar clientes. Utilizando querystrings.
//manda 10 clientes, começando pelo 21o
```
**Saída de sucesso:**
```javascript=
{
status: 200,
dados: {
paginaAtual: 3,
totalDePaginas: 10,
clientes: [
{
nome: "nome do cliente",
email: "exemplo@email.com",
cobrancasFeitas: 120000,
cobrancasRecebidas: 100000,
estaInadimplente: true,
},
{
nome: "nome do cliente",
email: "exemplo@email.com",
cobrancasFeitas: 120000,
cobrancasRecebidas: 100000,
estaInadimplente: true,
},
...
]
}
}
```
## Buscar clientes
**URL:** `/clientes?busca=texto da busca&clientesPorPagina=10&offset=20`
**Método:** GET
**Token exigido:** Sim
**Entrada:**
```javascript=
As entradas estão na URL como forma de querystrings.
`busca=texto da busca&clientesPorPagina=10&offset=20`
// manda 10 clientes, começando pelo 21o, dentre os buscados
```
**Saída de sucesso:**
```javascript=
{
status: 200,
dados: {
paginaAtual: 3,
totalDePaginas: 10,
clientes: [
{
nome: "nome do cliente",
email: "exemplo@email.com",
cobrancasFeitas: 120000,
cobrancasRecebidas: 100000,
estaInadimplente: true,
},
{
nome: "nome do cliente",
email: "exemplo@email.com",
cobrancasFeitas: 120000,
cobrancasRecebidas: 100000,
estaInadimplente: true,
},
...
]
}
}
```
## Criar Cobrança
**URL:** `/cobrancas`
**Método:** POST
**Token exigido:** Sim
**Entrada:**
```json=
{
"idDoCliente": "idDoCliente",
"descricao": "descrição da cobrança",
"valor": 120000,
"vencimento": "data_de_vencimento",
}
//manda 10 clientes, começando pelo 21o
```
**Saída de sucesso:**
```javascript=
{
status: 201,
dados: {
cobranca: {
idDoCliente: "idDoCliente",
descricao: "descrição da cobrança",
valor: 120000,
vencimento : "data_de_vencimento",
linkDoBoleto: "http://link.do.boleto",
status: AGUARDANDO | PAGO | VENCIDO
}
}
}
```
## Listar Cobranças
**URL:** `/cobrancas?cobrancasPorPagina=10&offset=20`
**Método:** GET
**Token exigido:** Sim
**Entrada:**
```javascript=
A filtragem ocorre pelo meio de querystrings na URL
`?cobrancasPorPagina=10&offset=20`
//manda 10 clientes, começando pelo 21o
```
**Saída de sucesso:**
```javascript=
{
status: 200,
dados: {
paginaAtual: 3,
totalDePaginas: 10,
cobrancas: [{
id: "idDaCobranca",
idDoCliente: "idDoCliente",
descricao: "descrição da cobrança",
valor: 120000,
vencimento : "data_de_vencimento",
linkDoBoleto: "http://link.do.boleto",
status: AGUARDANDO | PAGO | VENCIDO
},
{
id: "idDaCobranca",
idDoCliente: "idDoCliente",
descricao: "descrição da cobrança",
valor: 120000,
vencimento : "data_de_vencimento",
linkDoBoleto: "http://link.do.boleto",
status: AGUARDANDO | PAGO | VENCIDO
},
{
id: "idDaCobranca",
idDoCliente: "idDoCliente",
descricao: "descrição da cobrança",
valor: 120000,
vencimento : "data_de_vencimento",
linkDoBoleto: "http://link.do.boleto",
status: AGUARDANDO | PAGO | VENCIDO
}
...
]
}
}
```
## Pagar Cobrança
**URL:** `/cobrancas`
**Método:** PUT
**Token exigido:** Sim
**Entrada:**
```javascript=
{
idDaCobranca: "id_da_cobranca"
}
```
**Saída de sucesso:**
```javascript=
{
status: 200,
dados: {
mensagem: "Cobrança paga com sucesso"
}
}
```
## Obter Relatório
**URL:** `/relatorios`
**Método:** GET
**Token exigido:** Sim
**Entrada:**
```javascript=
```
**Saída de sucesso:**
```javascript=
{
status: 200,
dados: {
relatorio: {
qtdClientesAdimplentes: 10,
qtdClientesInadimplentes: 12,
qtdCobrancasPrevistas: 20,
qtdCobrancasPagas: 30,
qtdCobrancasVencidas: 40,
saldoEmConta: 6000000
}
}
}
```
## Pagar.me
Para integrar com a pagarme, consulte sempre a documentação [disponível aqui](https://docs.pagar.me/docs/realizando-uma-transacao-de-boleto-bancario).
Para integrar, use a seguinte API_KEY:
- API_KEY: `ak_test_UmTegBDBoqn6Bbmjahxb5OUR5k1hWq`