# Whatssapp Chorme Extension

[Roadmap + Cronograma](https://docs.google.com/spreadsheets/d/1SQnvIWb78LdP6g1YB09aSd6dPpH2C3EwWeWUJVZgFAk/edit#gid=0)
[Project](https://gitlab.wssim.com.br/cloud/crm-google-extension)
[Protótipo](https://xd.adobe.com/view/e7de6226-71b9-42ac-8b1b-52e24aa950fb-b28d/)
[Fontes](https://fonts.google.com/icons?selected=Material+Icons:post_add:&icon.query=MAPS)

# MVP 1.0 (Documentação)

### Estrutura inicial da extensão
1. Criação da estrutura inicial da extensão
- Criação do repositório no gitlab (OK)
- Criação iniciar da arquitetura do projeto
- Configuração do manifest.js e suas configurações (OK)
- Criação de estrutura de internacionalização
- Criação de estrutura de comunicação com back-end
- Definição de ambiente que o projeto apontará (dev, prd)
- Configurar em constante a URL
- Definição e importação de accets (logos, icones, fontes, icones)
2. Criação da estrutura de internacionalização
- "DESCREVER AQUI"

### Estrutura de Inject dentro do Whatsapp Web
1. Criação de div com slide
- Criação da div com slider conforme exemplo abaixo:
-

2. Botão flutuante para abrir/fechar "slide"
- Criar o botão flutuante para que se possa apresentar ou não a tela da extensão, conforme imagem abaixo:
- 

### Termos de Uso
1. Tela de aceite termos de uso
- Realizar a criação da tela do termo de aceite conforme protótipo abaixo:
- 
- Esta tela deverá ser apresentada somente na primeira vez que o usuário acessar a extensão, tendo o concentimento das informações.
2. Links para leitura dos termos
- Redirecionar o link dos temos para o link (https://www.totvs.com/politica-de-privacidade/)

### Login
1. Tela de login
- Realizar a criação da tela de login, conforme o protótipo abaixo:
- 
- Após realizar o login, deverá ser gerado o token do usuário, para que o usuário não realize de hora em hora o login.
3. Estrutura de requests
- Criar a estrutura de rotas utilizadas no login.
-Rota de login ( POST - {host}/api/login)
-Rota para geração do token ({host}/api/v12/user/generate-token)
5. "Esqueci a senha" Link para CRM
- Ao clicar em esqueci a senha, devera abrir uma nova tab redirecionando para o seguinte link (https://totvscrm.app/forgot-password)

### Menu Superior
1. Estrutura de menu
- Realizar a criação do menu no lado direito, conforme protótipo abaixo:
- 
- Este menu deverá apresentar as informações do usuário logado.
- E uma opção para permitir que o usuário saia da conta.

### Abas
1. Estrutura de abas com icones
- Realizar a criação da estrutura de tabs conforme imagem abaixo:
- 
- Deverá existis três tabs:
- Contato
- Atividade
- Oportunidade
2. Habilitar "abas de atividade e oportunidade" só após ter uma conta (encontrado/cadastrado) !?
- (PENDENTE) Verificar com a Dani, se quando não existir o contato cadastrato, podemos simplemente desabilitar as tabs de Atividade e Oportunidade.

### Mecanismo de Interceptação
1. Criar mecanismo para interceptar contato do whatsapp e carregar no CRM buscando pelo telefone e ao não encontrar disponibilizar essas informações para cadastro de um novo contato.
- "DESCREVER AQUI"

### Contato
1. Tela de visualização de contato
- Realizar a criação da tela de visualização de contato, e da conta(cliente/lead) relacionada caso esteja relacionado, conforme imagem abaixo:
- 
- A visualização deverá ser dividida em duas partes, uma apresentando as informações do 'Contato' e outra parte abaixo apresentando as informações da 'Conta'(Cliente/Lead).
- Para o card de 'Contato', deverá ter um menu apresentando as seguintes opções:
- Editar (Deverá abrir a tela de cadastro/edição do contato dentro da extenção).
- Ver no TOTVS CRM (Redirecionar para o cadastro do contato no TOTVS CRM, utilizando a seguinte url (https://totvscrm.app/customer/contacts/form/{contactId}))
- A apresentação das informações do contato, será dividida em duas etapas, uma apresentando as informações básicas, e ao clicar em 'Ver detalhes', deverá expandir apresentando o restante dos atributos:
- name (básico)
- name account (básico)
- department (básico)
- birthday (básico)
- phones (detalhe)
- emails (detalhe)
- facebook (detalhe)
- instagram (detalhe)
- twitter (detalhe)
- linkedin (detalhe)
- website (detalhe)
- role (detalhe)
- note (detalhe)
- addresses (detalhe)
2. Estrutura da identificação do contato
- Criar a estrutura de consulta do contato pelo telefone selecionado..
3. Criação das rotas
- Criar estrutura de rotas utilizadas para consulta de contato e conta conforme informações necessárias para apresentação.

"QUESTÃO": QUANDO IDENTIFICADO QUE EXITE MAIS DE UM CONTATO CADASTRADO, O QUE FAZER?
Trazer o primeiro sempre!

### Cadastro de contato
1. Tela de cadastro de contato
2. **Validar componentes expecificos, como ficarão (telefone, email, endereço -> busca por cep)**

### Visualização de Conta (Lead/Customer)

### Cadastro de conta (Lead/Customer)

### Links para Oportunidade e Atividade
1. Criar botão de redirecionamento para o TOTVS para cadastro de Oportunidades.
- Ao acessar a tab de Oportunidade, deverá apresentar um botão 'Criar oportunidade', conforme imagem abaixo:
- 
- Ao clicar, deverá criar redirecionar em uma nova tab do navegador, para a seguinte url para cliente (https://totvscrm.app/opportunity/opportunities/new?customerId={customerId}) e (https://totvscrm.app/opportunity/opportunities/new?leadId={leadId}) para Lead, onde ao acessar o cadastro de oportunidade já será preenchida as informações conforme o cliente/lead repassado na url.

2. Criar botão de redirecionamento para o TOTVS para cadastro de Atividades.
- Ao acessar a tab de Atividades, deverá apresentar um botão 'Criar atividade', conforme imagem abaixo:
- 

- Ao clicar, deverá criar redirecionar em uma nova tab do navegador, para a seguinte url para cliente (https://totvscrm.app/opportunity/activities/new?customerId={customerId}) e (https://totvscrm.app/opportunity/activities/new?leadId={leadId}) para Lead, onde ao acessar o cadastro de atividade já será preenchida as informações conforme o cliente/lead repassado na url.

# MVP 2.0
### Cadastro de Atividade

### Cadastro de Oporutnidade