🎫 Widget Deep Service Desk

Widget Vue.js para integração com o sistema Deep Service Desk. Permite criar tickets de forma simples e segura em qualquer aplicação Vue.js.

✨ Características

• ✅ Seguro: Autenticação obrigatória
• ✅ Flexível: Configuração via plugin Vue ou props
• ✅ Simples: Instalação via npm e configuração global
• ✅ Responsivo: Interface adaptável a diferentes telas
• ✅ Configurável: UUID único por cliente

📋 Pré-requisitos

• Vue.js 3.x
• Token de autenticação válido no localStorage
• UUID do cliente

🚀 Instalação

1. Instalar via npm

npm install @pedrohrs/deep-service-desk-widget

2. Configurar no main.js

import { createApp } from 'vue'
import App from './App.vue'
import DeepServiceDeskPlugin from '@pedrohrs/deep-service-desk-widget'

const app = createApp(App)

// Configurar o plugin globalmente
app.use(DeepServiceDeskPlugin, {
  clientUuid: '1c9eb621-b56c-43e4-b04b-b1a91b0a1809', // UUID do seu cliente
  apiUrl: 'http://localhost:3000/api' // URL da sua API
})

app.mount('#app')

3. Obter o UUID do cliente

1. Acesse o painel administrativo do Deep Service Desk
2. Vá para a seção "Clientes"
3. Copie o UUID do cliente desejado
4. Configure no main.js conforme exemplo acima

💻 Uso Básico

1. Usar o componente

<template>
  <div>
    <!-- Seu conteúdo -->
    <button @click="openTicketWidget">🎫 Novo Ticket</button>
    
    <!-- Widget (registrado globalmente) -->
    <TicketWidget 
      @ticket-created="onTicketCreated"
      @ticket-error="onTicketError"
    />
    
    <!-- Ou usando o nome alternativo -->
    <DeepServiceDeskWidget 
      @ticket-created="onTicketCreated"
      @ticket-error="onTicketError"
    />
  </div>
</template>

<script>
export default {
  methods: {
    openTicketWidget() {
      // Disparar evento para abrir o widget
      window.dispatchEvent(new CustomEvent('new-ticket'))
    },
    onTicketCreated(data) {
      console.log('Ticket criado:', data)
      alert(`Ticket "${data.title}" criado com sucesso!`)
    },
    onTicketError(error) {
      console.error('Erro:', error)
      alert(`Erro: ${error.message}`)
    }
  }
}
</script>

2. Configurar autenticação

O widget busca automaticamente tokens de autenticação no localStorage:

// Exemplo de configuração de token
localStorage.setItem('token-deep', 'seu-jwt-token-aqui')

// Opcional: dados do usuário
localStorage.setItem('user-deep', btoa(JSON.stringify({
  id: 1,
  email: 'usuario@exemplo.com',
  name: 'Nome do Usuário'
})))

🔧 Configuração Avançada

Opções do Plugin

app.use(DeepServiceDeskPlugin, {
  clientUuid: 'uuid-do-cliente',     // UUID do cliente (obrigatório)
  apiUrl: 'http://localhost:3000/api' // URL da API (opcional)
})

Props do Componente

Prioridade de Configuração

1. Props do componente (maior prioridade)
2. Configuração global do plugin
3. Variáveis de ambiente
4. Configuração manual via interface

Exemplo com props

<template>
  <!-- Sobrescrever configuração global para um cliente específico -->
  <TicketWidget 
    client-uuid="outro-uuid-cliente"
    api-url="https://api.exemplo.com"
    @ticket-created="onTicketCreated"
    @ticket-error="onTicketError"
  />
</template>

Eventos emitidos

Abrir o widget programaticamente

// Método 1: Evento customizado (recomendado)
window.dispatchEvent(new CustomEvent('new-ticket'))

// Método 2: Via referência do componente
this.$refs.ticketWidget.openPopup()

🔐 Autenticação

O widget busca tokens de autenticação na seguinte ordem:

1. localStorage.getItem('token-tc') (sistemas externos)
2. localStorage.getItem('token-deep') (Deep Service Desk)
3. localStorage.getItem('authToken') (genérico)

Formato do token de usuário

// user-tc ou user-deep (base64 encoded JSON)
{
  "id": 1,
  "email": "usuario@exemplo.com",
  "name": "Nome do Usuário",
  "role": "user"
}

🎨 Personalização

CSS Classes disponíveis

• .ticket-widget - Container principal
• .popup-overlay - Overlay do modal
• .popup-content - Conteúdo do modal
• .uuid-config-section - Seção de configuração do UUID
• .widget-status - Seção de status
• .ticket-form - Formulário

Exemplo de personalização

/* Personalizar cores do widget */
.ticket-widget .popup-header {
  background-color: #your-brand-color;
}

.ticket-widget .btn-submit {
  background-color: #your-brand-color;
}

🔄 Fluxo de Uso

Com configuração global:

1. Widget carrega UUID automaticamente do plugin
2. Widget inicializa e busca cliente na API
3. Usuário clica para abrir o widget
4. Widget exibe formulário de ticket diretamente

Sem configuração ou com erro:

1. Usuário clica para abrir o widget
2. Widget exibe tela de configuração solicitando UUID
3. Usuário insere UUID do cliente
4. Widget valida UUID e busca cliente na API
5. Widget exibe formulário de ticket

Alteração de UUID:

1. Usuário clica no botão "🔄" no status do widget
2. Widget limpa configuração atual
3. Widget exibe tela de configuração novamente

🐛 Solução de Problemas

Plugin não configurado

💡 UUID do cliente não configurado via plugin.

Solução: Configure o plugin no main.js com app.use(DeepServiceDeskPlugin, { clientUuid: 'seu-uuid' }).

Token não encontrado

Token de autenticação não encontrado. Faça login no sistema.

Solução: Certifique-se de que o token está no localStorage.

Cliente não encontrado

Cliente não encontrado. Verifique se o UUID está correto.

Solução: Verifique se o UUID está correto e se o cliente existe no sistema.

📦 Build e Desenvolvimento

Para desenvolvedores do widget

# Instalar dependências
npm install

# Desenvolvimento
npm run dev

# Build para produção
npm run build

# Lint
npm run lint

📞 Suporte

Para suporte técnico, entre em contato com a equipe de desenvolvimento do Deep Service Desk.

📄 Licença

Este widget é parte do sistema Deep Service Desk.