Nossa nova versão de card para adoção tem um botão na barra de baixo há esquerda para que possa ser possível dar um like na postagem.

• Adicionar botão de like conforme layout
• Salvar o like por usuário na base de dados
• Criar uma página ou filtro para poder procurar por pets que tiveram like pelo usuário
• Cachear essa informação no front-end para não consumir muitos dados móveis do usuário
• Considerar uso de graphql com apollo para otimização do cache (se valer a pena o esforço)

This is an example Python exception

Objetivo

Quando um usuário logado registrar o interesse em um pet, o processo deve funcionar da seguinte maneira:

• Quando o usuário clicar no botão, devemos emitir a mensagem de sucesso para ele informando o seguinte: "Que legal! Você é mais um terráqueo agindo por uma boa causa! Em breve os responsáveis do seu futuro amiguinho entrarão em contato.
• Quando a pessoa confirmar que tem interesse, precisamos que ela auto declare que tem algumas condições mínimas para ter um animal: Será um "Aceito os termos" com alguns tópicos que a ONG piloto ficou de nos enviar para colocarmos no processo.
  • Criado issue separada para isso: #112
• Na área de administração da ONG, criar uma seção onde seja possível consultar os pedidos de adoção, constando Nome do interessado, Telefone, E-mail, Pet escolhido e Data da solicitação.
• Na área de administração, exibir uma notificação sempre que alguém fazer um pedido de adoção pela página. Sugestão "O usuário Tiago Giusti acabou de registrar interesse em um pet da sua ONG". Ou, se quiser e não for complexo, já colocar o nome do pet na mensagem. Ao clicar na mensagem, levar para a página que lista os pedidos de adoção efetuado.
  • Criado issue separada para isso: #113

Resultado
Screenshot dos cards de adoção

Screenshot da página de interessados em adoção

Hoje quando tempos um nome fantasia de ONG com acento, ao acessar a página de show desta ONG a URL acaba ficando com acento também, exemplo: https://porumaboacausa.herokuapp.com/ngos/sosanimalcrici%C3%BAma

• Ajustar para que a URL não considere acentuação;
• Realizar testes para cobrir este cenário;

See more on sentry:
https://sentry.io/caroline-salib/boacausa-web/issues/615705000/

• Permitir realizar o login via google
• Permitir realizar o login via facebook
• Verificar problema de domínio no facebook
• Verificar porque o Tiago não consegue fazer login pelo Google

This is an example Python exception

This is an example Python exception

This is an example Python exception

• Registrar as pessoas físicas e jurídicas que fizeram algum tipo de doação: financeira, ração, medicamentos, etc.
• Para pessoas físicas, podemos ver uma forma de marcar ela como doadora, que pode ser o Administrador da ONG ou a própria pessoa indicar que é doadora.
• No caso de empresas, permitir que o admin cadastre empresas que doam com a logo, nome e cidade.
• As pessoas podem autorizar serem exibidas junto a ONG, para serem conhecidas. As empresas, também dar um destaque especial, impulsionando mais doações;

Obs.: Notes oriundas da meeting com a ONG Amigo Bicho em Abril/2018.

The login with facebook and google might be broken when using http://www.boacausa.org because of the new URL.

Hoje salvamos um número no cadastro de pets que representa quantos anos o pet tem. Porém em alguns casos o pet pode ter apenas "meses" ou podemos não saber a idade.

Perguntas:

• Devemos ter a data de nascimento do pet?
• Devemos salvar uma idade fixa do pet (como fazemos hoje)?

Este card tem o propósito de discutir a melhor forma de guardarmos essas informações. Não sei ao certo se devemos ter o campo data de nascimento ou idade ou mesmo os dois.

Criar uma suit de testes unitários que irá conter os models, controllers e services já feitos.

Permitir registrar quem foi a pessoa que ficou com o animal e inabilitar as demais que não foram selecionadas. A prioridade será por ordem de chegada ou qualificação que a ONG pode fazer contatando a pessoa ou verificando seu perfil, condições, etc. Nesta hora, precisa inabilitar o animal para não ficar mais disponível para adoção.

Para simular, fazer login e depois clicar na opção Logout, no canto direito superior.

O sistema é redirecionado para este endereço e causa o erro abaixo:
https://porumaboacausa.herokuapp.com/ngo_area/login.html

Por quê?

• Venho encontrando algumas dificuldades de manter o código limpo e testável usando JQuery com as views do rails
• Com ReactJs vamos poder reutilizar componentes JS no código inteiro, mantendo consistência
• Este é o melhor momento para fazer isto pois temos algumas tarefas de validação front-end pendente e o novo layout ainda está sendo desenhado pela UILab, por tanto é melhor preparar o terreno antes de fazer todas essas melhorias na UI

Como:

• Adicionado webpacker para poder trabalhar com o React dentro do Rails
• Criar todas as views em react utilizando os mesmos estilos
  • A ideia é que depois seja removido o bootstrap e feito tudo a limpo usando o layout novo e Flexbox
• Adicionar alguns testes de front-end como modelo (pode ser follow up)

Páginas que serão reescritas:

• Site

• Listagem de ONGs

• Listagem de ONGs -> Saiba mais

• Adoção

• Página Inicial

• Login

• Reset Password

• Novo cadastro

• Área da ONG

• Ongs index

• Ongs edit/new

• Pets index

• Pets edit/new

• Usuários index

• Usuários edit/new

This is an example Python exception

Atualmente o cadastro de usuários fica disponível para qualquer pessoa, podendo esta relacionar o novo usuário com uma ou mais ONGs.

• Alterar para que só apareça as ONGs relacionadas ao current_user na hora de cadastrar novos usuários (Admin tem acesso a todas);
• O campo ONG deve ser obrigatório para criação de um usuário do grupo de permissões "Ngo";
• Apenas usuários do grupo de ONGs devem ter a opção de relacionar com ONGs;
  • Obs.: Não faz sentido selecionar ONG para admin, pois admin tem acesso a todas as ONGs;
  • Obs.2: Não faz sentido selecionar ONG para usuário sem grupo de permissões pois este não tem acesso a área administrativa;

Imagem da parte de seleção da ONG:

Remover a gem paperclip e aws-sdk (que instala todas as CLIs da amazon) e utilizar o active storage no lugar.

Active storage documentation: https://edgeguides.rubyonrails.org/active_storage_overview.html

Hoje quando a imagem do pet para adoção não pode ser carregada, o card fica feio. Devemos ter uma imagem de fallback.

Observação: por enquanto pode ser uma imagem qualquer da internet até que a UILab disponibilize isto pra gente.

https://sentry.io/caroline-salib/boacausa-web/issues/776404711/

See more on sentry:
https://sentry.io/caroline-salib/boacausa-web/issues/615705000/

Sugestões para a página "Adote"

• Acredito que faça sentido ter no mínimo em cada card: Foto, Nome, Descrição, Idade e Sexo. Penso que a Idade e Sexo poderiam ser usado uma palavra com label colorido daqueles do boostrap.
• Pensei que no rodapé do card podemos ter um botão de ação para registrar o interesse, chamado "Quero adotar". E caso o usuário não esteja logado, podemos exibir uma mensagem em cinza (no lugar daquela data que está ali atualmente): "Faça login e adote on-line".

Obs.: não tenho sugestões melhores para o topo, mas se desejar, pode reduzir o tamanho e frases. Se precisar, posso ajudar quando você propor um novo tamanho.

Ler sobre LGPD.

• http://www.planalto.gov.br/ccivil_03/_ato2015-2018/2018/lei/L13709.htm
• https://pt.wikipedia.org/wiki/Lei_Geral_de_Prote%C3%A7%C3%A3o_de_Dados_Pessoais

Como faz?

Hoje ao editar o usuário atual e remover o grupo admin do mesmo, ao recarregar a página de listagem de usuários a mesma retorna mensagem de não encontrada.

Isto ocorre pois usuários que não são admin não tem permissão de acessar essa tela.

• Corrigir para que em caso de edição, se o usuário perder acesso a página atual redirecionar para uma outra página na qual ele terá acesso.

Somente o usuário que cadastrou pode ver a ONG.

Na página inicial (que vai ser chamada SOBRE), terá um link para a página de ONGS e quando esta página for exibida, uma lista de ONGs deve ser exibida. Segue abaixo as instruções sugeridas, ficando livre o dev para encontrar uma melhor solução:

• Ter uma seção com um título e descrição, antes da listagem das ONGS. O título pode ser "Conheça as ONGs que fazem parte", e descrição "Encontre aqui uma ONG para acompanhar suas atividades, consultar sua situação financeira e fazer doações.

• Ter uma lista de ONGs onde exiba os seguintes dados abaixo em cards retangulares. (obs.: não precisa ter o nome "Título", conforme coloquei abaixo, apenas o valor direto vindo do cadatro da ONG. Coloquei as identificações apenas para saber como organizar os tamanhos de fontes, layout etc)

• Título: Nome da ONG, com o avatar (imagem) da ONG, podendo ser quadradinho.

• Descrição: campo Descrição, podendo ser um texto mais em cinza. Da Amigo Bicho erá o seguinte valor: ONG de proteção animal apartidária, sem fins lucrativos, sustentada por doações voluntárias, composta de cidadãos voluntários.

• E-mail

• Telefone

• Cidade/UF.

• Label colorido verde informando "Atuando desde 2010", pegando o year() da data de início do cadastro da ONG.

• Ter uma seção ou linha de divisão onde possamos especificar assim: "Como colaborar com esta ONG?"

• Ter botões de ação para doação normal e via paypal. Penso que pode ser "Doe via depósito ou transferência" ou "Doe on-line agora!". Os botões podem ter cores diferentes ou ícones juntos para identificar que um é doação manual e outro é doação eletrônica (e preferida e sugerida por nós).

• Para a doação manual, o botão pode abrir uma modal onde contenha os dados do campo "Dados bancários" do cadastro da ONG. Para a doação via paypal, leva o usuário para a página do Paypal.

• Incluir um botão ou ícone onde leva o usuário para a URL (nova aba) do Portal da transparência. Penso que pode ser algo como "Acompanhe nossos gastos" ou "Transparência da ONG"

Obs.: futuramente, podemos ver para ter uma ação onde eu posso dizer "Ver pets para adoção" e isto me levar para a página de pets, filtrando apenas os pets desta ONG. (sonhando aqui haha)

• Remover código duplicado da máscara de telefone js;
• Hoje os scripts se encontram nas views de ngo/form e registration/new;
• Adicionar limite de 15 caracteres e remover da view;

Implementar o novo layout da página de ONGs, incluindo:

• Listagem de ONGs
• Página da ONG
• Layout responsivo

Initial mockup

See more on sentry:
https://sentry.io/caroline-salib/boacausa-web/issues/615692680/

Colocar mensagem de validação na tela de login.
Quando digito a senha incorreta não aparece nenhuma mensagem informando

• Sempre que o login ou senha falhar deve ser mostrado a mesma mensagem:
  • "Email ou senha inválidos."
• Alterar o nome "Password" para "Senha" na tela de sign-in

See more on sentry:
https://sentry.io/caroline-salib/boacausa-web/issues/615692680/

Do jeito que está hoje, os pets cadastrados não estão relacionados com nenhuma ONG.

• Adicionar relação entre pets e ONGs;
• Só mostrar Pets da mesma ONG que o usuário na listagem de pets da página administrativa;
  • Usuários admin podem ver todos os pets;
• Adicionar campo obrigatório de de ONG ao registrar um Pet;
• Após adicionar em produção, migrar os pets cadastrados sem ong para uma ong aleatória;

• Adicionar uma aba de usuários dentro da área administrativa;
• Permitir que membros com permissão admin possam ver todos os usuários e cadastrar novos usuários;

Garantir que as doações do Paypal sejam por boleto e cartão de crédito e tentar simplificar para evitar o cadastro no Paypal.

Avaliar como desativar para o paypal não obrigar a pessoa a fazer um cadastro. Isto pode ser um problema para pessoas comuns. Mas pelo que pesquisei [1], isto só é possível em uma conta business.

[1] https://pt.stackoverflow.com/questions/27076/fazer-pagamento-no-paypal-sem-obrigar-o-cliente-a-registar-sem-conta

This is an example Python exception

Mockap atualizado do figma:

Resultado

• Imagens nos comentários
• Ainda não suporta bem dispositivos de tamanhos médios como tablets
• Talvez a imagem dos pets na versão mobile esteja meio embaçada e teremos que exportar imagens menores (avaliar)

Hoje na Olx.com existe a opção de doação, pode integrar os dados com o portfolio de doação do Boa Causa.

Sugestão:

• Verificar se a olx tem alguma API pública
• Fazer um crawler e consumir os dados com por geolocalização

Só me dizem se é possivel e se o projeto ainda esta rolando.

• Implementar uma relação das ongs e dos usuários que tem acesso a estas;
• Permitir cadastrar usuários para a ong;
  • No cadastro de usuários vai ter checkboxs com as ONGs relacionadas ao usuário permitindo adição/remoção;
  • Usuários admin terão acesso a todas as ONGs;
• Mostrar somente dados da ong que o usuário tem relação na página administrativa;

@carolinesalib não seria melhor usar a configuração padrão do Rails 5.2 para o arquivo boacausa-webapp/config/database.yml?
Já tenho um usuário na minha máquina, e a senha sugerida não atende os requisitos da minha configuração local.

A versão do Ruby informado no README(Ruby 2.5.1) é diferente da informada no arquivo .ruby-version que é 2.6.1. Qual versão usar?

This is an example Python exception

• Ter grupo de permissões admin, ong, usuários normais;
• Permitir realizar cadastro apenas de usuários normais pelo site;
• O cadastro de usuários poderá ser via google, facebook ou cadastro;
• Pessoas com permissão de usuário não terão acesso a página administrativa;

Registrar as pessoas físicas e jurídicas que fizeram algum tipo de doação: financeira, ração, medicamentos, etc. Para pessoas físicas, podemos ver uma forma de marcar ela como doadora, que pode ser o Administrador da ONG ou a própria pessoa indicar que é doadora. No caso de empresas, permitir que o admin cadastre empresas que doam com a logo, nome e cidade.

As pessoas podem autorizar serem exibidas junto a ONG, para serem conhecidas. As empresas, também dar um destaque especial, impulsionando mais doações;

Após a realização deste card, será possível seguir com as melhorias na página de adoção, permitindo usuários aplicarem para adotar animais, etc..

See more on sentry:
https://sentry.io/caroline-salib/boacausa-web/issues/616578078/

Nossa nova versão de card para adoção tem um botão na barra de baixo há direita para que possa ser compartilhado esse post em redes sociais.

Veja na imagem:

• Adicionar botão para compartilhar correspondendo ao layout
• Deve ser possível compartilhar no facebook
• Deve ser possível compartilhar no twitter
• Deve ser possível copiar o link
• Talvez mais opções de compartilhamento se a gente achar uma ferramenta pra ajudar com isso no npm

Tentei usar a opção Esqueceu sua senha e obtive uma tela de erro.

Passos para simular:

1. Acesse a página Forgot your password: http://porumaboacausa.herokuapp.com/users/password/new
2. Informe um email existente na base;
3. Clique em Send me...
4. Note a página de erro, conforme a imagem abaixo:

Eu, enquanto usuário do grupo Admin, quero cadastrar novos usuários com as validações necessárias para que o cadastro seja válido.

• Campos obrigatórios;
• Validação de e-mail;
• Máscara e validação de CPF;
• Password segura;

Adicionar um arquivo CSS exclusivo para essa página e transferir todo o hardcode da view para esse arquivo.