---
# System prepended metadata

title: Whatssapp Chorme Extension

---

# 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:
        -![](https://i.imgur.com/gMtGb7f.png)
 
 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:
         - ![](https://i.imgur.com/xdynbQ6.png)
 

### Termos de Uso
 1. Tela de aceite termos de uso
     - Realizar a criação da tela do termo de aceite conforme protótipo abaixo:
         - ![](https://i.imgur.com/wwuPTNs.png)
         - 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:
         - ![](https://i.imgur.com/9PD5k7V.png)
         - 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:
         - ![](https://i.imgur.com/LFr1TuU.png)
     - 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:
         - ![](https://i.imgur.com/f0z6Wdq.png)
     - 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:
         - ![](https://i.imgur.com/WolFrTj.png)
    - 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:
         - ![](https://i.imgur.com/4lYqlHZ.png)
     - 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:
         - ![](https://i.imgur.com/l3v78Bo.png)

     - 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
